background-image

by 2 contributors:

This article is in need of an editorial review.

概要

CSS の background-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 URIs made absolute
  • アニメーションの可否 不可
  • 正規順序 形式文法で定義される一意のあいまいでない順序

構文

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

background-image: inherit;

Values

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

形式文法

<bg-image>#

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

背景透過と不透明な背景

実際の表示を確認

複数の背景と透過

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

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
The definition of 'background-image' in that specification.
勧告候補 CSS2 Revision 1 と比べ、プロパティが複数の背景と任意の <画像> CSS データ型をサポートするよう拡張されました。
CSS Level 2 (Revision 1)
The definition of 'background-image' in that specification.
勧告 CSS1 と比べ、画像が固有の寸法を持たない場合、持つ場合の取り扱い方が明記されました。
CSS Level 1
The definition of 'background-image' in that specification.
勧告  

ブラウザ実装状況

機能 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 未サポート 未サポート 未サポート
任意の <画像> ? 未サポート ? ? ?
機能 Safari Mobile Opera Mini Opera Mobile Android
基本サポート (有) (有) (有) (有)
複数の背景 (有) (有) (有) (有)
グラデーション (有) -webkit
[3]
? ? (有) -webkit [4]
SVG 画像 (有) [2] (有) (有) 未サポート
element (有)-moz ? ? ?
image-rect (有)-moz 未サポート 未サポート 未サポート
任意の <画像> 未サポート ? ? ?

[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 構文

関連情報

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

Contributors to this page: mitsuba-clover, ethertank
最終更新者: mitsuba-clover,