W3G

Updated 2013.10.27 / Published 2007.02.02

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

値

• <background-color>
• <background-image>
• <background-repeat>
• <background-attachment>
• <background-position>
• inherit

初期値

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プロパティで黒色の背景に対してコントラストが高くなる白色を指定するなどの工夫をすると良いでしょう。背景画像が表示されていない状況でも背景色と文字色が読みやすい高コントラストの関係を保つことができます。

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