cman.jp > WEBページ作成TOP > CSSリファレンス > 「背景画像の設定」
WEBページ作成
広告
background-image 「背景画像の設定」
background-image プロパティは背景画像の設定を行うことができます。背景画像以外もまとめて背景を指定する場合は、backgroundを使用します。
背景画像は複数指定することもできます。
| CSS Ver. | 適用要素 | 継承 |
|---|---|---|
| 2.1 (※ 3.0で拡張) | 全て | しない |
広告
background-image の値
【構文】
background-image : [image] ;
| image [背景画像の指定] | |
|---|---|
| background: url([画像へのパス]); | [例] url("../image/back.gif") カンマで区切ることで、画像を複数指定することもできます。 |
background-image のサンプル
※ サンプル使用画像
| bg-img.png | bg-img2.png |
|---|---|
 |
 |
1.背景画像の指定
<html>
<head>
<title>背景画像サンプル</title>
<style type="text/css">
<!--
th { background: #00ff40; height: 35px; font-size: 10pt; }
/* 背景画像サンプル（単一画像） */
td.s1
{
background-image: url("./img/bg-img.png");
width : 300px;
height : 100px;
}
/* 背景画像サンプル（複数画像） */
td.s2
{
background-image : url("./img/bg-img2.png"),url("./img/bg-img.png");
background-repeat : no-repeat, repeat;
background-position: left top, left top;
width : 350px;
height : 100px;
}
-->
</style>
</head>
<body>
<span style="font-size:11pt;" >背景画像サンプル</span>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<th>単一画像</th>
<th>複数画像</th>
</tr>
<tr>
<td class="s1"></td>
<td class="s2"></td>
</tr>
</table>
</body>
</html>
ページTOP
| 関連するCSS(STYLE) | |
|---|---|
| background | 背景全般の設定 |
| background-attachment | 背景画像のスクロール |
| background-blend-mode | 背景をブレンド |
| background-clip | 背景画像の表示エリア |
| background-color | 背景色の設定 |
| background-origin | 背景画像の表示位置の基点 |
| background-position | 背景画像の表示位置の設定 |
| background-repeat | 背景画像の繰返し設定 |
| background-size | 背景画像の表示サイズ設定 |
| border-image | 画像を使った罫線の表示 |
| image-rendering | 画像倍率表示時の指定 |
| list-style-image | リストマークの画像 |
| border-image-outset | ボーダーイメージエリアを広げる |
| border-image-repeat | 画像ボーダーの繰り返し方法 |
| border-image-slice | 画像のボーダー使用範囲 |
| border-image-source | ボーダーの使用画像ファイル |
| border-image-width | 画像ボーダーの太さ |
広告