: サイト構築 -CSS

[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日

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

内容内容内容内容内容

コリス: on 2008年4月4日

> ume さん

なるほど。
領域の幅を変更したり、数を変更したりも有りですね。

ふと思ったけど、背景画像を写真画像にしても、、、うーん、いまいちか。
あ、その領域がユーザーが変更できると、本のページめくりみたいにできるかも。

ページの先頭へ