background-image

概要

CSS の background-image プロパティは、要素に背景画像を指定する為のプロパティです。 背景画像は、基本的には祖先となる要素の背景より上位のコンテキスト・レイヤーに描画されます。同一要素内においては、 background-color は背景画像より下、ボーダー は背景画像よりも上位のレイヤーに描画されます。

画像は要素のボックスの領域に対し相対的に描画され、またその境界は background-clip プロパティと background-origin プロパティによって定義されます。

指定された URI のファイルをロードできない等の理由によって背景画像を描画することはできない場合、ブラウザーはそれらを none が指定された場合と同じように処理します。

使用上の注意: 仮に背景画像が要素のレイヤーのサイズより大きかったり、background-repeat プロパティの指定によってレイヤー全体が背景画像で覆われていたとしても、背景画像を使うときは常に background-color を併用すべきです。画像が読み込めなかった時や、読み込みが完了するまでの時間、背景色は背景画像のフォールバックとして機能します。例えば黒い背景画像と白い文字色を組み合わせ且つ背景色を指定していなかった場合、画像が読み込めなかった時にデフォルトスタイルが白である事の多いの body　の背景色の上に白い文字が描画されてしまい、閲覧者は文字を読むことすら出来なくなってしまうでしょう。これを防ぐ為です。

構文

background-image: background-image[, background-image]*
background-image
<画像> で背景を指定します。また、背景画像を用いない事を明示する場合は none キーワードを指定します。
いくつかのブラウザーは multiple backgrounds（複数の背景） をサポートしています。

例

実際の表示を確認

body {
  background-image: url("images/darkpattern.png");
  background-color: #000;  /* 背景画像が読み込めない場合に備え、近似色を指定 */
  color: #fff;             /* 背景画像や背景色を指定する場合は、基本的に文字色も指定しておいた方が無難 */
}

div {
  /* 新しいブラウザでは複数の背景をカンマ区切りで複数指定する事も可能 */
  background-image: url("images/foo.png"), url("images/bar.png");
}

p { background-image: none; }

仕様

仕様書 策定状況 コメント
CSS Backgrounds and Borders Module Level 3 勧告候補 同一要素に対する複数の背景指定のサポートが追加されています。
CSS 2.1 勧告 レイヤーに関するものを除く、背景の取り扱い方法が定められました。
CSS 1 勧告  

ブラウザ実装状況

機能 Firefox (Gecko) Chrome Internet Explorer Opera Safari
基本サポート 1.0 (1.7 or earlier) 1.0 4.0 3.5 1.0
複数の背景 3.6 (1.9.2) 1.0 9.0 yes 1.3
CSS グラデーション 3.6 (1.9.2)-moz 1.0-webkit 10-ms 11+-o 4.0-webkit
SVG 画像 4.0 (2.0) 8.0 9.0 9.5 5.0 [1]
element() (有)-moz ? 未サポート 未サポート 未サポート
image-rect() (有)-moz 未サポート 未サポート 未サポート 未サポート
Any <画像> value. 未サポート ? ? ? ?
機能 iOS Safari Opera Mini Opera Mobile Android Browser
基本サポート yes yes yes yes
複数の背景 yes yes yes yes
CSS グラデーション yes -webkit
iOS 4.2 以前のバージョン用の古い webkit 構文		 ? ?

yes-webkit

古い webkit 構文
SVG 画像 yes [1] yes yes 未サポート
element() (有)-moz ? ? ?
image-rect() (有)-moz 未サポート 未サポート 未サポート
Any <画像> value 未サポート ? ? ?

注意

[1] iOS Safari (5.0) とそれ以前のバージョン の iOS Safari 5.0 では、CSS での SVG の背景への適用に関するサポートが不完全です。

関連情報

Document Tags and Contributors

タグ:
Contributors to this page: ethertank
最終更新者: ethertank,
サイドバーを隠す