スタイルシート［CSS］/テーブル/セルの背景に画像を使う

background-image は、背景画像を指定するプロパティです。

table、tr、td要素やth要素にこのスタイルを設定すると、セル（または表全体）の背景に画像を表示することができます。

table {
background-image: url(image/back.gif);
}

background-image	表示させたい画像ファイルを指定します

background-repeat や background-position なども指定することができます。

【画像の指定方法】

url( ) … ( ) 内に画像のファイルを指定します。

（例）　background-image: url(back.gif);

次のように none を指定すると、「画像なし」を指定したことになります。（デフォルト）

background-image: none;

【適用範囲】

■table要素に指定した場合

table { background-image: url(image/back.gif); }

表全体に背景画像を指定できます。

HP作成A社	HP作成B社
HP作成C社	HP作成D社

■tr要素に指定した場合

tr.example { background-image: url(image/back.gif); }

行単位で背景画像を指定できます。

HP作成A社	HP作成B社
HP作成C社	HP作成D社

■td要素（th要素）に指定した場合

td.example { background-image: url(image/back.gif); }

セル単位で背景画像を指定できます。

HP作成A社	HP作成B社
HP作成C社	HP作成D社

※table要素とtr要素に対する指定は、Netscape4では対応していないようです。

背景画像を指定する場合は、文字が見づらくならないように注意しましょう。また、背景画像を表示できないユーザーのために、同時に背景色を指定しておくことをお勧めします。指定方法の詳細は「関連ページ」をご覧ください。

使用例

<html>
<head>
<title>TAG index Webサイト</title>

<style type="text/css">

</style>

</head>
<body>

<table>
<tr>
<th>Webディレクター</th>
<th>Webデザイナー</th>
<th>Webプログラマー</th>
</tr>
<tr>
<td>A氏</td>
<td>C氏</td>
<td>E氏</td>
</tr>
<tr>
<td>B氏</td>
<td>D氏</td>
<td>F氏</td>
</tr>
</table>

</body>
</html>

▼これをブラウザで見ると次のように表示されます

Webディレクター	Webデザイナー	Webプログラマー
A氏	C氏	E氏
B氏	D氏	F氏

セルの背景に画像を使う

background-image: url(***);

使用例