CSSテクニック

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


一覧へ戻る


Last Modified 2005-2-09 © きくちゃん 2004 - All Rights Reserved