Summary

CSSbackground-image プロパティは、要素に1つ以上の背景画像を設定します。画像はお互いの上に積み重ねるコンテキストレイヤーに描画されます。最初に指定されたレイヤーが、ユーザーに対し最も手前にあるかのように描画されます。

要素のボーダーは背景画像よりも上、background-color は背景画像より下に描画されます。画像がボックスとその境界に対し相対的にどう描画されるかは、background-clip プロパティと background-origin プロパティによって定義されます。

指定された画像を描画することができない(例えば、指定された URI が指し示すファイルをロードできない)場合、ブラウザはその指定を none 値であるかのように処理します。

注意: たとえ画像が不透明で通常は色が表示されないとしても、ウェブ開発者は常に background-color を指定すべきです。例えばネットワークが切断された場合など、もし画像が読み込めなかったときに、背景色はフォールバックとして使われます。

初期値none
適用対象全要素. It also applies to ::first-letter and ::first-line.
継承不可
メディアvisual
計算値as specified, but with url values made absolute
Animation typediscrete
正規順序形式文法で定義される一意のあいまいでない順序

構文

background-image: none;
background-image: url(http://www.example.com/bck.png);

background-image: inherit;

none
画像を用いないことを表すキーワード。
<image>
表示する背景を指し示す <image>。カンマ区切りで複数指定することができ、複数の背景をサポートしています。

形式文法

<bg-image>#

where
<bg-image> = none | <image>

where
<image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>

where
<image()> = image( [ [ <image> | <string> ]? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>

where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] <resolution>
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )

where
<rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = <color-stop>#{2,}
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]

where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
<color-stop> = <color> <length-percentage>?
<length-percentage> = <length> | <percentage>

複数の背景と透過

星の画像は一部透過となっており、猫の画像の上に重ねられている点に注意してください。

HTML

<div>
    <p class="catsandstars">
        This paragraph is full of cats<br />and stars.
    </p>
    <p>This paragraph is not.</p>
    <p class="catsandstars">
        Here are more cats for you.<br />Look at them!
    </p>
    <p>And no more.</p>
</div>

CSS

pre, p {
    font-size: 1.5em;
    color: #FE7F88;
    background-color: transparent;
}

div {
  background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
}

p {
  background-image: none;
}

.catsandstars {
  background-image:  url("https://developer.mozilla.org/samples/cssref/images/startransparent.gif"), 
                     url("https://mdn.mozillademos.org/files/7693/catfront.png");
  background-color: transparent;
}

仕様

仕様書 策定状況 コメント
CSS Backgrounds and Borders Module Level 3
background-image の定義
勧告候補 CSS2 Revision 1 と比べ、プロパティが複数の背景と任意の <image> CSS データ型をサポートするよう拡張されました。
CSS Level 2 (Revision 1)
background-image の定義
勧告 CSS1 と比べ、画像が固有の寸法を持たない場合、持つ場合の取り扱い方が明記されました。
CSS Level 1
background-image の定義
勧告 初回定義

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 1.0 1.0 (1.7 or earlier)[1] 4.0 3.5 1.0
複数の背景 1.0 3.6 (1.9.2) 9.0 (有) 1.3
グラデーション 1.0-webkit 3.6 (1.9.2)-moz 10 11-o 4.0-webkit
SVG 画像 8.0 4.0 (2.0) 9.0 9.5 5.0 [2]
element ? (有)-moz 未サポート 未サポート 未サポート
image-rect 未サポート (有)-moz 未サポート 未サポート 未サポート
任意の <image> ? 未サポート ? ? ?
機能 Safari Mobile Opera Mini Opera Mobile Android
基本サポート (有) (有) (有) (有)
複数の背景 (有) (有) (有) (有)
グラデーション (有) -webkit
[3]
? ? (有) -webkit [4]
SVG 画像 (有) [2] (有) (有) 未サポート
element (有)-moz ? ? ?
image-rect (有)-moz 未サポート 未サポート 未サポート
任意の <image> 未サポート ? ? ?

[1] about:config のユーザー設定 browser.display.use_document_colorsfalse だと、背景画像は表示されません。

[2] 現行バージョンの iOS Safari (5.0) では、CSS 背景としての SVG サポートは不完全です。Safari 5.0 以前も同様。

[3] iOS 4.2 以前のバージョン用の古い webkit 構文

[4] 古い webkit 構文

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: wizAmit, SphinxKnight, teoli, mitsuba-clover, Sebastianz, dskmori, ethertank
 最終更新者: wizAmit,