html 要素とbody 要素のそれぞれに背景画像を指定するちょっとした小ネタ。ネタ元は、「UrbanDude: Using two page backgrounds」。
で、ちょっとなるほどなって思ったのが、html 要素に背景画像、body 要素にコンテンツの影画像を指定し、その影を png 画像で透過させてなじませているやり方。汎用性がありそうな感じ。当然、png に対応していない IE 用に子供セレクタ（IE未対応）を使ってbody 要素への指定を読み込ませないようにしている。
- サンプル （ IE で閲覧しても影は表示されません）
CSS はこんな感じで。
html {
background: #CCE599 url(back.gif) repeat-x fixed left top;
}
html>body {
background: transparent url(shadow.png) repeat-y 50% 0;
}
body {
margin: 0;
padding: 0;
font-size: 80%;
font-family: Verdana, Arial, sans-serif;
text-align: center;
}
#container {
text-align: left;
width: 600px;
margin: 0 auto;
background: #FFFFFF;
padding: 35px;
}ネタ元の Example3 も、参考にすれば面白いことが出来るかもしれませんね。しかし、CSS3 のbackground プロパティ関連の草案見ると、背景画像を複数配置出来ちゃったりとか、ボックスに影を付けられたりとか、何だか凄いこと出来ちゃいそうです。
Comments