例
以下のための背景画像を設定し<body>要素：
body
{
background-image: url("paper.gif");
background-color: #cccccc;
}
»それを自分で試してみてください もっと"Try it Yourself"以下の例。
定義と使用法
背景画像のプロパティは、要素のための1つまたは複数の背景画像を設定します。
要素の背景には、パディングとボーダーを含む要素の合計サイズです(but not the margin) 。
デフォルトでは、背景画像は、要素の左上隅に配置され、垂直方向と水平方向の両方に繰り返されます。
Tip:常にイメージが使用できない場合に使用される背景色を設定します。
| デフォルト値： | none |
|---|---|
| 継承されました： | no |
| アニメーション： | no. Read about 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 |
Note: IE8以前の一つの要素に複数の背景画像をサポートしていません。
CSSの構文
background-image:url|none|initial|inherit;プロパティ値
| 値 | 説明 |
|---|---|
| url(' URL ') | 画像へのURL。 コンマでURLを区切り、複数の画像を指定するには |
| none | いいえ背景画像が表示されません。 これがデフォルトです |
| initial | このプロパティがデフォルト値に設定します。 初期についての記事を読みます |
| inherit | その親要素からこのプロパティを継承します。 継承についての記事を読みます |
その他の例
例
以下のために複数の背景画像を設定し<body>要素：
body {
background-image: url("img_tree.gif"),
url("img_flwr.gif");
background-color: #cccccc;
}
»それを自分で試してみてください 関連ページ
CSSチュートリアル： CSSの背景
CSS3チュートリアル： CSS3の背景
HTML DOMリファレンス： backgroundImage property