htmlとbodyに背景画像

html 要素とbody 要素のそれぞれに背景画像を指定するちょっとした小ネタ。ネタ元は、「UrbanDude: Using two page backgrounds」。

で、ちょっとなるほどなって思ったのが、html 要素に背景画像、body 要素にコンテンツの影画像を指定し、その影を png 画像で透過させてなじませているやり方。汎用性がありそうな感じ。当然、png に対応していない IE 用に子供セレクタ(IE未対応)を使ってbody 要素への指定を読み込ませないようにしている。

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 プロパティ関連の草案見ると、背景画像を複数配置出来ちゃったりとか、ボックスに影を付けられたりとか、何だか凄いこと出来ちゃいそうです。

この記事についての情報

似た内容の記事

この記事に対するトラックバック

トラックバックURL: https://www.lucky-bag.com/mt/mt-tb.cgi/225

ネットビジネス用CGI Perl HTML Javascriptの情報サイト - HTMLで背景画像 (2006年3月31日 00:09)

  さて今回は、背景に画像を入れるための、HTMLタグについて説明します。

以前説明した

続きを読む

Comments