[CSS]背景画像を半々に表示するスタイルシート

CSS-Trickのエントリーから、背景画像を半々に表示するスタイルシートの紹介です。

Multiple Backgrounds: Left Half and Right Half
デモページ

デモページのHTMLとCSSは下記のようになっています。

bodyとdivの場合

<body>
<div id="rightHalf"></div>
</body>

*{margin:0;padding:0;}
html{overflow-y: scroll;}
body{background:url(images/bg-1.jpg);}
#rightHalf{
	background:url(images/bg-2.jpg);
	width:50%;
	position:absolute;
	right:0px;
	height:100%;
}

divとdivの場合

<body>
<div id="leftHalf"></div>
<div id="rightHalf"></div>
</body>

#leftHalf{
	background:url(images/bg-1.jpg);
	width:50%;
	position:absolute;
	left:0px;
	height:100%;
}
#rightHalf {
	background:url(images/bg-2.jpg);
	width:50%;
	position:absolute;
	right:0px;
	height:100%;
}

背景画像半々は使わないと思うけど、応用がききそうなのでメモ。

Post on:2008年4月4日

top of page

Trackback

leave your Comments

Comments

ume

on 2008年4月4日

こんなのもありだと思うのです。

半分半分のbackgroundは使いづらいですが、下のように３つに分けるとか、さらに応用で真ん中の「#naka」をさらに２つ３つと分ければ使い物になるのではないでしょうか？

左では、黄色の画像、右では赤の画像があって真ん中でまた違った素材画像で展開するという使い方は有りではないでしょうか…

#leftHalf {
background: url(bg-1.jpg);
width: 30%;
position: absolute;
left: 0px;
height: 100%;
foat:left;
}
#rightHalf {
background: url(bg-2.jpg);
width: 30%;
position: absolute;
right: 0px;
height: 100%;
}
#naka{
background-color:red;
margin-left:30%;
width:40%;
height: 100%;
}