◆テーブルに背景画像を固定する◆

【背景をテーブルの右下に固定】
【背景をテーブルの右下に固定】

↑のソース
<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>



と、こんな感じです。