ページの背景に画像を指定するときによく使うのがStyleSheetのbackgroundプロパティです。
→「
背景の設定をまとめて指定する」
しかし、上一列に画像を並べ、左下に別の画像を固定表示させたい…なんていうときに、同じ要素に対してbackgroundプロパティを複数指定することはできません。
(できない…というか、エラーにはなりませんが思うように表示されないのです)
そこで、まず大きなテーブルを作成します。
テーブルの大きさとBODY要素は、幅(width)を100%、高さ(height)も100%にし、BODY要素には「margin:0」も指定します。
これでページと同じサイズのテーブルがぴったり重なることになります。
あとはBODY要素とTD要素に別々のbackgroundプロパティを設定してやればよいのです。
この方法を使うと、何重にも重ねることができます。(使う人なんかいるのかな?)
サンプルを用意したのでこちらからどうぞ →
サンプル
| ※ |
Operaで表示させた場合、BODY要素の「margin:0」は認識してくれないようで、隙間が開いたように(デフォルト)表示されてしまいます。
InternetExplorerやNetscapeでは、ぴったりとくっついて表示されます。
このような現象を回避するには、HTML4.01の規格外ではありますが、BODYタグにページの余白を指定する方法があります。
詳しくはこちらに解説があります → 「ページの余白を指定する」 |
 |
 |
 |
 |
<STYLE type="text/css">
<!--
BODY {
margin:0; ← マージンを0にしておかないとテーブルがぴったり重なりません
width:100%;
height:100%;
background-image : url(img/u-08.gif); ← BODY属性の背景画像を指定
background-repeat:repeat-x; 〃
background-position:top; 〃
}
TD {
background-image : url(img/a_u-03.gif); ← TD属性の背景画像を指定
background-repeat:repeat-x; 〃
background-position:bottom; 〃
}
-->
</STYLE>
</HEAD>
<BODY bgcolor="#ffffff">
<TABLE width="100%" height="100%" cellpadding="0" cellspacing="0"> ← 重なるテーブルの指定
<TR>
<TD align="center"> </TD>
</TR>
</TABLE>
</BODY>
|
 |
 |
 |
 |
