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

Multiple Backgrounds: Left Half and Right Half
デモページ
デモページのHTMLとCSSは下記のようになっています。
bodyとdivの場合
divとdivの場合
背景画像半々は使わないと思うけど、応用がききそうなのでメモ。
Post on:2008年4月4日
CSS-Trickのエントリーから、背景画像を半々に表示するスタイルシートの紹介です。

Multiple Backgrounds: Left Half and Right Half
デモページ
デモページのHTMLとCSSは下記のようになっています。
背景画像半々は使わないと思うけど、応用がききそうなのでメモ。
Post on:2008年4月4日
こんなのもありだと思うのです。
半分半分のbackgroundは使いづらいですが、下のように3つに分けるとか、さらに応用で真ん中の「#naka」をさらに2つ3つと分ければ使い物になるのではないでしょうか?
左では、黄色の画像、右では赤の画像があって真ん中でまた違った素材画像で展開するという使い方は有りではないでしょうか…
#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%;
}
内容内容内容内容内容
> ume さん
なるほど。
領域の幅を変更したり、数を変更したりも有りですね。
ふと思ったけど、背景画像を写真画像にしても、、、うーん、いまいちか。
あ、その領域がユーザーが変更できると、本のページめくりみたいにできるかも。