CSSbackground-image プロパティは、要素に1つ以上の背景画像を設定します。

画像はお互いの上に積み重ねるコンテキストレイヤーに描画されます。最初に指定されたレイヤーが、ユーザーに対し最も手前にあるかのように描画されます。

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

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

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

構文

それぞれの背景画像は、キーワード none 又は <image> 値として指定されます。

複数の背景画像を指定するには、複数の値をコンマで区切って指定してください。

background-image:
  linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)),
  url('https://mdn.mozillademos.org/files/7693/catfront.png');

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>
<id-selector> = <hash-token>
<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} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <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

p {
  font-size: 1.5em;
  color: #FE7F88;
  background-image: none;
  background-color: transparent;
}

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

.catsandstars {
  background-image:
      url("https://mdn.mozillademos.org/files/11991/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 の定義
勧告 初回定義

初期値none
適用対象すべての要素。 ::first-letter and ::first-line にも適用されます。
継承なし
メディア視覚
計算値as specified, but with url values made absolute
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1
補足
完全対応 1
補足
補足 If the browser.display.use_document_colors user preference in about:config is set to false, background images will not be displayed.
IE 完全対応 4Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
Multiple backgroundsChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 3.6IE 完全対応 9Opera 完全対応 ありSafari 完全対応 1.3WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
GradientsChrome 完全対応 1
補足
完全対応 1
補足
補足 Some versions support only experimental gradients prefixed with -webkit.
Edge 完全対応 12Firefox 完全対応 3.6
補足
完全対応 3.6
補足
補足 Some versions support only experimental gradients prefixed with -moz.
IE 完全対応 10Opera 完全対応 11
補足
完全対応 11
補足
補足 Some versions support only experimental gradients prefixed with -o.
Safari 完全対応 4
補足
完全対応 4
補足
補足 Some versions support only experimental gradients prefixed with -webkit.
WebView Android 完全対応 ありChrome Android 完全対応 あり
補足
完全対応 あり
補足
補足 Some versions support only experimental gradients prefixed with -webkit.
Edge Mobile 完全対応 ありFirefox Android 完全対応 あり
補足
完全対応 あり
補足
補足 Some versions support only experimental gradients prefixed with -moz.
Opera Android 完全対応 あり
補足
完全対応 あり
補足
補足 Some versions support only experimental gradients prefixed with -o.
Safari iOS 完全対応 あり
補足
完全対応 あり
補足
補足 Some versions support only experimental gradients prefixed with -webkit.
Samsung Internet Android 完全対応 あり
SVG imagesChrome 完全対応 8Edge 完全対応 12Firefox 完全対応 4IE 完全対応 9Opera 完全対応 9.5Safari 完全対応 5
補足
完全対応 5
補足
補足 Support of SVG in CSS background is incomplete.
WebView Android 未対応 なしChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 5
補足
完全対応 5
補足
補足 Support of SVG in CSS background is incomplete.
Samsung Internet Android 完全対応 あり
element()
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 あり
補足
完全対応 あり
補足
補足 element() is supported only in its -moz-element() prefixed version
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 完全対応 あり
補足
完全対応 あり
補足
補足 element() is supported only in its -moz-element() prefixed version
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
image-rect()
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 あり
接頭辞付き 補足
完全対応 あり
接頭辞付き 補足
接頭辞付き -moz- のベンダー接頭辞が必要
補足 image-rect() is supported only in its -moz-image-rect() prefixed version.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 完全対応 あり
接頭辞付き 補足
完全対応 あり
接頭辞付き 補足
接頭辞付き -moz- のベンダー接頭辞が必要
補足 image-rect() is supported only in its -moz-image-rect() prefixed version.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
Any <image> valueChrome 完全対応 ありEdge ? Firefox 未対応 なしIE ? Opera ? Safari ? WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 未対応 なしOpera Android ? Safari iOS ? Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報

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

最終更新者: mfuji09,