◆テーブルに背景画像を固定する◆
【背景をテーブルの右下に固定】
↑のソース
<table width="350" height="250" border="1"
bgcolor="#f0f7ff" >
<tr>
<td style="background:url(画像ファイル)
no-repeat right bottom">
</td>
</tr>
</table>
■画像をリピートさせない> no-repeat
■左上に固定 left top
■右上に固定 right top
のように、青文字の部分を変更するだけで指定位置が変わります♪
【背景をテーブルの真ん中に固定】
<table width="350" height="250" border="1"
>
<tr>
<td style="background:url(画像ファイル)
no-repeat
center">
</td>
</tr>
</table>
【背景を左端に並べる】
<table width="350" height="250"
border="1" >
<tr>
<td style="background:url(画像ファイル)
repeat-y left">
</td>
</tr>
</table>
■画像を縦方向に繰り返す repeat-y
■右側に並べる right
のように、青文字の部分を変更するだけで指定位置が変わります♪
【背景を上部に並べる】
<table width="350" height="250" border="1"
>
<tr>
<td style="background:url(画像ファイル) repeat-X
top">
</td>
</tr>
</table>
■画像を横方向に繰り返す repeat-x
■下部に並べる bottom
のように、青文字の部分を変更するだけで指定位置が変わります♪
【背景をお好みの位置に固定】
<table cellpadding="0" cellspacing="2"
width="350" height="300"background="画像ファイル"
style="border:solid 1px #666699;background-color: #f0f7ff ; background-position:10%
70%;background-repeat : no-repeat;">
<tr>
<td>
</td>
</tr>
</table>
この場合の画像位置 background-position:10% 70% は
10% が左からの位置
70% が上からの位置
数値(%)を変更することで縦横の位置が細かく指定できます♪
【ページ内全てのテーブルの画像位置を同じにする場合】
<body>〜</body>の間に↓ソースを書けばokです。
<STYLE type="text/css">
<!--
TABLE {
background-image : url(画像ファイル);
background-attachment :fixed;
background-repeat: no-repeat;
background-position: 100% 100%;
}
-->
</STYLE>
と、こんな感じです。