CSS background-image プロパティ

❮ 前章へ 完全な CSS リファレンス 次へ ❯

<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 以前は、一つの要素に複数の背景画像をサポートしていません。


CSS 構文

background-image: url|none|initial|inherit;

プロパティの値

説明
url('URL') 画像の URL。1つ以上の画像を指定する場合は、カンマでURLを区切ります
なし 背景画像を表示しません。これがデフォルトです
initial プロパティにデフォルト値を設定します。initial を参照
inherit このプロパティは親要素を継承します。 inherit を参照

Examples

その他の例

<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 プロパティ


❮ 前章へ 完全な CSS リファレンス 次へ ❯