背景の2重指定

背景を2つ指定できたらいいのに・・・なんて思ったことありませんか？
一つは画面全体に、もう一つは左端に固定するといった感じです。
じつはCSSを使えば実現できちゃいます！

手っ取り早いのは・・・

bodyタグに一つ目の背景を指定して、中に入れるDIVタグに2つ目の背景を指定すること。・・・といいたいところですが、それじゃあスマートじゃない。
意外と知られていないもう一つのテクニックがあるんです。

HTMLタグにも背景を

意外と知られていませんが、htmlタグにも背景画像を指定することができます。これを利用すれば背景の2重指定が可能になります。

やり方

１：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>

２：スタイルシートを書く

スタイルシートはこんな感じになります。

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;はあまり指定しないほうがいいようです。

一覧へ戻る