background-image

Updated / Published

background-imageプロパティは要素に背景画像を設定します。背景色が同時に設定されている場合は、背景画像の方が背景色より上位レイヤーに表示されます。

値
初期値
none
適用対象
すべての要素
継承
しない
メディア
visual

値は"url()" の形式で括弧内に背景画像の所在となる URI を指定します。また、背景画像を指定しないことを示す "none" のキーワードを指定することもできます。

背景色や背景画像などの背景が反映される領域を背景領域と呼び、ボーダー領域（内容領域+パディング+ボーダー）までが背景領域となります。ただし、ボーダー領域は背景の上から重ねて描かれるので背景が反映されるのはボーダーの色が透明や二重線、破線といった透ける場合に限られます。また例外もあり、ルート部の要素では（スクロール分も含めた）表示域全体が背景の描画対象となることと、border-collapseプロパティによる表の表示モデルによっても分離ボーダーモデル（border-collapse : separate ;）のセルの背景領域は通常どおりボーダー（枠線）の領域まで（内容領域+パディング+ボーダー）ですが、結合ボーダーモデル（border-collapse : collapse ;）のセルの背景領域はパディング領域まで（内容領域+パディング）になります。

背景関連プロパティ

background-imageプロパティのみの指定では背景画像は指定された領域に合わせてタイル状に縦横に繰り返し表示されますが、背景画像の表示方法をコントロールするプロパティと組み合わせることもできます。背景画像と組み合わせることができるプロパティには次の4つがあります。

background-color
背景色を指定する
background-repeat
背景画像の繰り返し表示方法を指定する
  • repeat
  • repeat-x
  • repeat-y
  • no-repeat
  • inherit
background-attachment
背景画像を表示域に対して固定表示するか否かを指定する
background-position
背景画像の表示開始位置を指定する

これら背景に関するプロパティは backgroundプロパティを用いることで、ひとつにまとめて簡略指定することもできます。

background-imageプロパティの実装状況

IE
◯
Firefox
◯
Opera
◯
Chrome
◯
Safari
◯
iOS
◯
Android
◯

サンプル

.content {
color : white ;
background-color : black ;
background-image : url(image.gif) ;
}

サンプルのように背景画像を設定する場合は、セットで背景色と前景色もあわせて指定しておくようにしましょう。ユーザ毎に UA の環境設定やユーザスタイルシートに設定されている背景色と前景色は異なるためです。また、画像が読み込めなかった時や、読み込みが完了するまでの時間、背景色は背景画像のフォールバックとして機能します。

たとえば、サンプルの画像が黒っぽい背景画像と仮定した場合、background-colorプロパティで同系の黒色を背景色に指定した上で、前景色には colorプロパティで黒色の背景に対してコントラストが高くなる白色を指定するなどの工夫をすると良いでしょう。たとえ背景画像が表示されていない状況でも背景色と文字色が読みやすい高コントラストの関係を常に保つことができます。