背景の2重指定
背景を2つ指定できたらいいのに・・・なんて思ったことありませんか?
一つは画面全体に、もう一つは左端に固定するといった感じです。
じつはCSSを使えば実現できちゃいます!
手っ取り早いのは・・・
bodyタグに一つ目の背景を指定して、中に入れるDIVタグに2つ目の背景を指定すること。
・・・といいたいところですが、それじゃあスマートじゃない。
意外と知られていないもう一つのテクニックがあるんです。
HTMLタグにも背景を
意外と知られていませんが、htmlタグにも背景画像を指定することができます。 これを利用すれば背景の2重指定が可能になります。
やり方
1:HTMLを書く
HTMLはこんな感じになります。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<link REL="stylesheet" type="text/css" HREF="./style.css">
<title>背景の2重指定</title>
</head>
<body>
</body>
</html>
2:スタイルシートを書く
スタイルシートはこんな感じになります。
html{ background-image:url(./img/back.gif); } body{ background-image:url(./img/back2.gif); background-repeat:repeat-y; }
実際に画面で見るとこのようになります。(別窓で開きます)
*上手く表示できるようにサンプルにはheightを指定してあります。
解説
htmlタグにも背景を指定できるという特徴を生かしただけなので、特に難しいところはありません。
ただし、このテクニックは標準準拠モードでhtmlを書く必要があります。
詳しくは標準準拠と過去互換モードを参照。
ここにだけ気をつけてください。
使いこなすための+α
bodyタグに指定する背景の表示方法を工夫すればいろいろできます。
実際に画面で見るとこのようになります。(別窓で開きます)
中に入れるボックスにも背景を指定すれば3重背景なども可能になります。 ただ、background-attachment:fixed;はあまり指定しないほうがいいようです。