背景画像指定
background-imageプロパティは、背景の画像を指定します。
背景色の場合と同様に、ここで設定した画像はボックスのマージン（常に透明）には適用されません。環境によっては、背景画像が表示されない場合もありますので、背景色も同時に指定しておくようにしてください。URL：画像のURLHTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>背景画像を指定する</title>
<style type="text/css">
<!--
body {
margin: 2em;
color: #ffffff;
background-color: #ff3300;
background-image: url(../assets/images/red.jpg)
}
h1 {
text-align: center;
color: #ffffff;
background-color: #000000;
background-image: url(../assets/images/black.jpg)
}
p {
padding: 1em;
color: #000000;
background-color: #ffcc00;
background-image: url(../assets/images/yellow.gif)
}
div {
padding: 1em;
color: #000000;
background-color: #ffffff;
background-image: url../assets/images/(white.jpg)
}
table, input {
color: #ffffff;
background-color: #ff3300;
background-image: url(../assets/images/red.jpg)
}
caption, select {
color: #ffffff;
background-color: #333399;
background-image: url(../assets/images/blue.gif)
}
textarea {
color: #ffffff;
background-color: #339933;
background-image: url(../assets/images/green.jpg)
}
-->
</style>
</head>
<body>
<h1>h1要素</h1>
<p>
スタイルシートを使用すると、さまざまな要素の背景画像を自由に設定することができます。
</p>
<div>
<table border="2" cellpadding="8">
<caption>table要素</caption>
<tr><th>ヘッダセル</th><th>ヘッダセル</th><th>ヘッダセル</th></tr>
<tr><td>データセル</td><td>データセル</td><td>データセル</td></tr>
</table>
<p>
<textarea rows="4" cols="50">textarea要素</textarea>
</p>
<p>
<input type="text" value="input要素">
<input type="checkbox" name="chk" checked>
<input type="checkbox" name="chk">
<input type="radio" name="rdo" checked>
<input type="radio" name="rdo">
<select>
<option>select要素</option>
<option>option要素</option>
</select>
<input type="button" value="button">
</p>
</div>
</body>
</html>
