ページの背景画像複数をdivひとつに抑えて表示する

htmlとCSSを本業にするようになってから、こまごまとしたTipsくずれの知恵を得るようになった。今回はそのうちのひとつをメモ。

デザイナーが頑張ってつくったwebサイトのデザインは半分くらいが複雑で、フォトショではレイヤースタイルを2つ重ねただけの処理も、コーダーにとっては厄介だったりするものも多々ある。今回はやっぱりそんなような事例で、ページ全体の背景にドロップシャドウとグラデーションを加えたものをどうやってコーディングするかというもの。

背景画像は3枚に分割する必要がある。グラデだけ、シャドウだけ、グラデとシャドウがまじった部分、の計3つ。IE6が絶滅して透過pngが使えるようになれば2つで済むけれど、そんな先の話をしてもしょうがない。divを2つ使っても解決できるけれど、なにも検討せず無意味にタグを増やすのはよろしくない。ということで、ページ全体に3つの背景画像を使う場合に、divの使用をひとつに抑えられる方法を考えた次第です。

ページ内の要素全体を包括するdivをひとつとすれば、それ以外の要素はhtmlとbodyしかないわけで、このふたつ＋divひとつで上記の内容を検討していく。

そしてその結果がこちら。

画像をどう重ねるかを考えれば、htmlにはグラデだけの画像をrepeat-xで、divにはグラデとシャドウの画像をno-repeatで配置するのは明確だから、工夫が必要なのはbody。留意したのは以下の点。

• bodyにwidth（センタリングする場合はmarginも）を指定する。
• bodyの背景が常に最下部まで伸びる場合はhtmlにheight:100%;、bodyにmin-height:100%;を指定する。
• 同様の場合、divの背景が途中で切れないように、画像の縦幅と同じ数だけmin-heightの値を指定する。
• bodyにposition:relative;を指定しておかないと、IEの場合に、内包するposition:relative;を指定した要素がブラウザのリサイズの際に崩れていく。

bodyに横幅やmarginを指定できるというのは、我流でhtml+CSSを学んだ身としては、あまり知れ渡っていないんじゃないかという印象があった。ほかのボックス要素などとはheightの伸び方などに若干クセはあるけれども、慣れればけっこう有効的に使えそう。