CSS+jQueryで左右別々の背景にする

Demo

中心で分かれた背景

とりあえず中に配置するコンテンツは考えないで左右で別々の背景画像を設定してみます。
デザインによっては左右でdivを配置する必要があるかもしれませんが、今回は全体を囲うdivと半分だけのdivを配置してみます。

html

	<div id="wrap">
		<div id="left-bg"></div>
	</div>
	

css

	html, body, #wrap, #left-bg {
		height: 100%;
	}
	#wrap {
		background: url(bg0.gif);
		width: 100%;
		position: relative;
	}
	#left-bg {
		background: url(bg1.gif);
		width: 50%;
		position: absolute;
	}
	

「width:100%」 の上に「width:50%」を重ねるだけですね。

中心にコンテンツを配置する。

「left-bg」の下に「article」を配置します。

html

	<div id="wrap">
		<div id="left-bg"></div>
		<div id="article">
			<h1>タイトル</h1>
			<p>コンテンツの内容です。</p>
		</div>
	</div>
	

css

	#article {
		position: absolute;
		left: 50%;
		width: 600px;
		margin-left: -300px;
		background: #fff;
	}
	

「left: 50%」で中心に配置して「width」の半分だけ「margin-left」をマイナスに配置すれば中心に配置されると思います。

可変に対応する。

今の状態だと背景画像のdivを「height:100%」にしたので「#article」が画面より大きいと背景画像が途中で切れてしまいますね。
これはjQueryで対応します。

javascript

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
	<script type="text/javascript">
	$(function() {
		var h = $('#article').height();
		if( $('#wrap').height() < h ) {
			$('#left-bg').height(h);
			$('#wrap').height(h);
		}
	});
	</script>
	

「#article」のheightを取得して、「#wrap」のheightより小さかったら同じ高さにするということをしています。

CSS3だともっとスマートにできます。

CSS3の時代が来ればboxレイアウトでJSなしでもっとスマートにできるっぽいです。

html

	<div id="wrap">
		<div id="left-bg"></div>
		<div id="article">
			<h1>タイトル</h1>
			<p>コンテンツの内容です。</p>
		<!-- /#article --></div>
		<div id="right-bg"></div>
	<!-- /#wrap --></div>
	

css3

	html, body {
		height: 100%;
	}
	#wrap, #article {
		min-height:100%;
	}
	#wrap {
		width: 100%;
		display: -webkit-box;
		display: -moz-box;
		display: box;
	}
	#left-bg,#right-bg {
		width: auto;
		-webkit-box-flex:1;
		-moz-box-flex:1;
		box-flex:1;
	}
	#left-bg {
		background: #CC9900 url(bg1.gif);
	}
	#right-bg {
		background: #CC9900 url(bg0.gif);
	}
	#article {
		width: 500px;
		text-align: center;
	}
	

ちょっと余分な要素が増えてるのがあれですが以上です。