backgroundプロパティは background-colorプロパティ, background-imageプロパティ, background-repeatプロパティ, background-attachmentプロパティ, background-positionプロパティの背景色・背景画像などの背景に関する5つのプロパティをまとめて設定するショートハンド(CSSにおいて値を簡略化できる記法のこと)です。

初期値
background-color : transparent ;
background-image : none ;
background-repeat : repeat ;
background-attachment : scroll ;
background-position : 0% 0% ;
適用対象
すべての要素
継承
しない
メディア
visual

値の指定方法は、各プロパティの値を半角スペースで区切って並べます。記述する際に各プロパティの値を並べる順序は特に決まっておらず、また必要のない指定は省略することができます。たとえば、背景色だけを指定する場合には、"background : #fff ;" とだけ簡略記述することができます。ただし、値を省略すると、省略された部分の各個別のプロパティの初期値が適用されることになります。

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

背景色と背景画像の両方を指定している場合は、背景画像の方が背景色より上位レイヤーに表示されます。なお、ユーザ毎に UA の環境設定やユーザスタイルシートに設定されている背景色と前景色は異なるため、制作者スタイルシートにて背景画像を設定する場合は、セットで背景色と前景色もあわせて指定しておくようにしましょう。画像が読み込めなかった時や、読み込みが完了するまでの時間、背景色は背景画像のフォールバックとして機能します。たとえば、黒っぽい背景画像を使用する場合、background-colorプロパティで同系の黒色を背景色に指定した上で、前景色には colorプロパティで黒色の背景に対してコントラストが高くなる白色を指定するなどの工夫をすると良いでしょう。背景画像が表示されていない状況でも背景色と文字色が読みやすい高コントラストの関係を保つことができます。

背景関連プロパティ

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

backgroundプロパティの実装状況

IE
◯:IE6 はbody要素以外にbackground-attachmentが指定されていると表示域に対しての固定ではなく適用した要素に対して固定する不具合有り
Firefox
Opera
Chrome
Safari
iOS
Android

サンプル

.bg {
  background : transparent url(image.gif) no-repeat center bottom ;
}

この例では、"transparent" が背景色を透過させる指定で、"url(image.gif)" は背景画像として表示させたいイメージファイルの所在を <URI> で指定しており、"no-repeat" は背景画像の表示を繰り返さない指定で、"center bottom" の値は要素内で背景画像を y軸の真ん中(50% と等価)・x軸の一番下(100% と等価)に表示する指定となっています。

これらを個別に指定した場合、background-color:transparent; background-image:url(image.gif); background-repeat:no-repeat; background-position:center bottom; と、これだけ多くのプロパティを定義しなければなりませんが、backgroundプロパティによる簡略指定であれば記述内容を大幅に削減できることがわかります。

Updated / Published