background-imageプロパティは要素に背景画像を設定します。背景色が同時に設定されている場合は、背景画像の方が要素の内容の背景として優先して表示されます。
値は"url()" の形式で括弧内に背景画像の所在となる URI を指定します。また、背景画像を指定しないことを示す "none" のキーワードを指定することもできます。なお、背景画像は指定された領域に合わせてタイル状に縦横に繰り返し表示されますが、背景画像の表示方法をコントロールするプロパティと組み合わせることもできます。背景画像と組み合わせることができるプロパティには次の4つがあります。
background-colorプロパティbackground-repeatプロパティbackground-attachmentプロパティbackground-positionプロパティこれら背景に関するプロパティは backgroundプロパティを用いることで、ひとつにまとめて簡略指定することもできます。
ユーザー毎に UA の環境設定やユーザースタイルシートに設定されている背景色と前景色は異なるため、制作者スタイルシートにて背景画像を設定するのであれば、セットで背景色と前景色もあわせて指定するようにしましょう。たとえば、黒っぽい背景画像を使用する場合、background-colorプロパティでも背景色を黒色に指定した上で、前景色を colorプロパティで黒色の背景に対してコントラストが高くなる白色を指定するなど見やすくなるように工夫しましょう。
.content {
color : white ;
background-color : navy ;
background-image : url(image.gif) ;
}
ここで使用している背景画像は紺色に近いので、あわせて背景色にも紺色を指定します。さらに文字色には紺色とのコントラストが高い白色を指定しておくことで何らかの理由で画像が表示されなかった場合にも、背景色と文字色は読みやすい高コントラストの関係を保つことができます。