backgroundプロパティは background-colorプロパティ, background-imageプロパティ, background-repeatプロパティ, background-attachmentプロパティ, background-positionプロパティの背景色・背景画像などの背景に関する5つのプロパティをまとめて設定します。
値の指定方法は、各プロパティの値を半角スペースで区切って並べます。記述する際に各プロパティの値を並べる順序は特に決まっておらず、また必要のない指定は省略することができます。たとえば、背景色だけを指定する場合には、"background : #fff ;" とだけ簡略記述することができます。ただし、値を省略すると、省略された部分の各個別のプロパティの初期値が適用されることになります。
背景色と背景画像の両方を指定している場合は、背景画像の表示が優先されます。この場合の背景色は、背景画像で指定している画像が何らかのトラブルで表示できない場合や、画像表示に対応していない環境のために、背景画像の代替となるような背景色を指定するようにします。たとえば、黒っぽい背景画像を使用している場合は、背景色にも黒色を指定しておきます。これにより背景画像が表示できない状況でも、文字色と背景色を読みやすいように高コントラストを保つことができます。
background-colorプロパティbackground-imageプロパティbackground-repeatプロパティbackground-attachmentプロパティbackground-positionプロパティbackground-attachment 部分の動作の実装に問題有り）background-attachment 部分の動作の実装に問題有り）
.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プロパティによる簡略指定であれば制作者としては記述内容も大幅に削減でき、個々のプロパティを覚える必要もないので楽ができます。