左右非対称の背景をCSSで実現する方法

公開日: 2010.10.12 | 最終更新日: 2010.10.15

左右非対称なデザインでも作ってみようかなと思ったので、ちょっと考えてみました。

上の画像のようにヘッダーの背景を左右異なるデザインを実装する方法になります。
今のところあんまりスマートな方法は思い付かなかったのですが、何通りか載せておきます。

説明

一つ目の方法

ここ（Double Backgrounds with CSS – CSS/XHTML Tutorial on how to achieve double backgrounds | HTML/CSS Tutorials | Web Design Tutorials and Front-end Development Blog by Soh Tanaka）で紹介されてる方法ですが、少し自分仕様に変更して紹介します。
背景のパーツは上の画像の三つとします。（左からleft-bg.gif、header-bg.gif、right-bg.gif）

マイナスポイント：空divが入る

HTML

<div id="rightbg"></div>
<div id="container">
<div id="header">ヘッダーの内容</div>
</div>

CSS

body{
	position: relative;
	margin: 0;
	padding: 0;
	text-align: center;
	background: #fff url(left-bg.gif) repeat-x;
}
#rightbg{
	position: absolute;
	right: 0;
	width: 50%;
	background: url(right-bg.gif) repeat-x;
}
#container{
	position: relative;
	margin: 0 auto;
	background: #fff;
	overflow: hidden;
}
#header{
	background: url(header-bg.gif) no-repeat;
}

二つ目の方法

上記のような真ん中で分かれた横幅1800px以上の画像（bg.gif）を作って背景にする方法です。

マイナスポイント：背景が途中で終わる

HTML

<div id="container">
<div id="header">ヘッダーの内容</div>
</div>

CSS

body{
	margin: 0;
	padding: 0;
	text-align: center;
	background: #fff url(bg.gif) no-repeat center;
}
#container{
	position: relative;
	margin: 0 auto;
	background: #fff;
}
#header{
	background: url(header-bg.gif) no-repeat;
}

一つ目の場合だと空divが入るし、二つ目だと背景が途中で終わってしまいますので、今後他の方法を思い付いた時に更新したいと思います。