background-image プロパティ。

background-image プロパティの扱い。

CSS水準

第一水準から。但し、複数画像については第三水準から。

CSS第三水準に於けるモジュール

背景・枠線モジュール

継承の有無

background-imageプロパティは、上位要素からは継承されません。

対象セレクタ

対象となるセレクタに制限はありません。

対象メディア

視覚系のメディア全てが対象となります。

background-image プロパティの書式。

background-image プロパティの書式は、以下のようになります。

background-image: 値

値としては、以下のものが取れます。

inherit

一番近い上位要素での背景画像を継承します。

none

水準に依り、以下の扱いとなります。

第二水準まで

背景画像を使いません。

第三水準以降

無色透明の背景画像を用います。

最も、第三水準の場合は無色透明となりますので、第二水準までの視覚効果と全く同じとなります。

url(画像のURL)

指定されたURLの画像を利用します。

• 相対アドレスの場合は当該スタイルシート基準でアドレスを解決します。

尚、CSS第三水準では、, で区切って二枚以上の画像を指定出来ます。

• この場合、画像URLだけでなく、none 値も列挙の対象となります。

また、background-image プロパティのデフォルト値は、(単一の) none です。

background-image プロパティの記述例。

例えば、デフォルトの文字色を黒に、背景画像に「Wall.GIF」(白っぽい画像)を指定する場合は、

* {
    background-image: url('Wall.GIF');
    background-color: #fff;
    color: #000;
    }

と記述します。

background-image プロパティの使用上の注意。

背景画像を指定した場合、以下のいずれかで可読性を損ねる場合があります。

背景色もそれに近いものを指定していない

ユーザエージェントが画像表示をしない設定にしている場合、背景画像が読み込まれず、背景色によって可読性が損なわれる恐れがあります。

前景色(文字の色)を指定していない

適切な前景色を指定していないと、背景画像に紛れて読めなくなる恐れがあります。

背景画像を指定する場合は、必ず

• color プロパティで適切な前景色
• background-color プロパティで背景画像に近い背景色

も併せて指定しましょう。

また、背景画像についても、色のムラの少ないものを撰ぶようにしましょう。

background-image プロパティの実装上の注意。

複数画像を用いる場合。

CSS第三水準(CSS 3)では、複数の背景画像に対応しておりますが、インターネットエクスプローラについては 9.0 からの対応となります。

8.0 より前の版では一枚も表示出来ませんので、注意してください。

• このため、背景がなくても可読性を維持出来るよう、background-color プロパティの併記が更に重要になります。