WEBOPIXEL

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

Posted: 2012.01.12 / Category: HTML&CSS, javascript / Tag: 

センターのコンテンツを固定幅にして、その左右の背景を別の画像にしたいときtableを使用すれば簡単ですが、今の時代tableで囲んでしまうのはあれですね。
そこでcss+jQueryでなんとかしてみます。

Sponsored Link

Demo

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なしでもっとスマートにできるっぽいです。

demo

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;
	}
	

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

COMMENTS

大久保 2012-01-13 12:03 

「CSS+jQueryで左右別々の背景にする」
タイムリーな情報でとても助かっています。ありがとうございます。

1点気になる現象があります。
カーソルを中ほどにし、ページ中央~下部を表示させた状態で
更新F5すると、背景がチラつきます。

特にFirefoxのチラつき大きく気になります。

これはjsでheightを動的取得している以上仕方が無いのでしょうか。

webOpixel 2012-01-13 16:14 

チラつくのは背景だけですかね?
なんでしょう、、、
下の方で更新すると、一度先頭が表示されてから元の位置に戻りますよね。
コンテンツの量がすくないので、それが一瞬で行われてチラついているように感じているということではないですか?

大久保 2012-01-20 11:48 

ありがとうございます。
そうですね。コンテンツの量によるものですね。

因みに、ページを開いたときよりウィンドウを広げると、左右の
画像(bg0.gif,bg1.gif);が切れてしまいます。

再度リロードすればちゃんとウィンドウ全範囲に背景画像が
敷かれるのですが。。。

これはウィンドウサイズを変更するだけではjsを読み込むトリガー
にならないから仕方が無いですよね。。

早くCSS3があたりまえの時代になって欲しいです。

webOpixel 2012-01-20 22:13 

よく考えたら左右はJS関係ありませんでした。
こちらの環境では切れるということはないのですが、よろしかったらどのような環境で見てるか教えて頂ければと思います。

Yamada 2012-02-03 18:37 

LEAVE A REPLY

コードを書く場合は<pre>で囲んでください。