個別記事

前後の記事

htmlとbodyに背景画像

この記事が属するカテゴリー
CSS

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

2005-02-24T18:46:12+09:00 | コメント (0) | トラックバック (1) |はてなブックマーク

関連性が高いエントリー 5 件

トラックバック

このエントリーのトラックバックURL:
http://WWW.lucky-bag.com/cgi/mt/mt-tb.cgi/164

このリストは、次のエントリーを参照しています: htmlとbodyに背景画像:

ネットビジネス用CGI Perl HTML Javascriptの情報サイト さんからのトラックバック
HTMLで背景画像

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

以前説明した

[続きを読む]
2006年03月31日 00:09

コメント

"htmlとbodyに背景画像"へのコメントはまだありません。

コメントしてください

コメント内ではタグは一切使えません。コメント内にてタグを表記したい場合は、お手数ですが、文字実体参照を利用して < を &lt; 、> を &gt; とそれぞれ置き換えてください。




保存しますか?


(V) (P)