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 にも適用されます。
継承不可
メディアvisual
計算値as specified, but with url values made absolute
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応1121143.51
Multiple backgrounds1123.69 あり1.3
Gradients12123.631011442
SVG images812499.555
element() なし なし あり6 なし なし なし
image-rect() なし なし あり -moz- 7 なし なし なし
Any <image> value あり ? なし ? ? ?
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり あり あり あり あり
Multiple backgrounds あり あり あり あり あり あり あり
Gradients あり あり2 あり あり3 あり4 あり2 あり
SVG images なし あり あり あり あり55 あり
element() なし なし なし あり6 なし なし なし
image-rect() なし なし なし あり -moz- 7 なし なし なし
Any <image> value あり あり ? なし ? ? あり

1. If the browser.display.use_document_colors user preference in about:config is set to false, background images will not be displayed.

2. Some versions support only experimental gradients prefixed with -webkit.

3. Some versions support only experimental gradients prefixed with -moz.

4. Some versions support only experimental gradients prefixed with -o.

5. Support of SVG in CSS background is incomplete.

6. element() is supported only in its -moz-element() prefixed version

7. image-rect() is supported only in its -moz-image-rect() prefixed version.

関連情報

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

最終更新者: mfuji09,