<body> 要素に背景画像を設定します:
body
{
background-image: url("paper.gif");
background-color: #cccccc;
}
Try it Yourself ❯
他の "Try it Yourself" 例が下にあります。
background-image プロパティは、要素へ 1 つ以上の背景画像を設定します。
要素の背景は、パディングとボーダーを含む要素の合計サイズです(マージンは含みません)。
デフォルトでは、背景画像は要素の左上隅に配置され、縦にも横にも繰返されます。
チップ: 画像が使用できない場合のため、必ず背景色を設定するようにしてください。
デフォルト値: | なし |
---|---|
継承: | 継承する |
アニメーション可否: | 不可。animatable を参照 |
バージョン: | CSS1 + new values in CSS3 |
JavaScript 構文: | object.style.backgroundImage="url(smiley.gif)" Try it |
表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。
プロパティ | |||||
---|---|---|---|---|---|
background-image | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
注: IE8 以前は、一つの要素に複数の背景画像をサポートしていません。
background-image: url|none|initial|inherit;
値 | 説明 |
---|---|
url('URL') | 画像の URL。1つ以上の画像を指定する場合は、カンマでURLを区切ります |
なし | 背景画像を表示しません。これがデフォルトです |
initial | プロパティにデフォルト値を設定します。initial を参照 |
inherit | このプロパティは親要素を継承します。 inherit を参照 |
<body> 要素への複数背景画像を設定します:
body {
background-image: url("img_tree.gif"),
url("img_flwr.gif");
background-color: #cccccc;
}
Try it Yourself ❯
CSS チュートリアル: CSS Background
CSS3 チュートリアル:CSS3 Backgrounds
HTML DOM リファレンス: backgroundImage プロパティ