背景に画像を使った例。一見、問題なさそうでも……
下記のボックスを見てみて下さい。 赤い背景色のボックスの中で、「桜と賞状」の描かれた背景画像が表示されており、その中に文字が表示されています。 このボックスにはある問題点があります。
一見、特に問題はないように見えるかもしれません。（低速な回線で閲覧されている方々は問題がよく分かったと思いますが。背景画像には、わざとファイルサイズの大きな画像「
」を指定しています。）
上記のサンプルで、「背景画像が表示されなかった場合」（＝背景画像が表示されるまでの待ち時間）の表示は以下のようになります。
まったく読めないと言ってもいいほど、非常に読みにくいですね。 背景色（#990000）と文字色（#CC0000）がとても似た色ですし、リンク部分の文字色（青色または紫色）も背景色がこの色ではとても読みにくいでしょう。
上記のサンプルには、次の問題点があります。
- 背景画像の読み込みが完了するまでは、文字が読めない。
- 背景画像が読み込まれなかった場合は、文字も読めないまま。
上記のサンプルで使っている背景画像は、445KBあります。そこそこファイルサイズの大きな画像です。 高速回線を使って閲覧している方々はあまり気にならなかったかもしれませんが、表示完了までには少し待ち時間が必要です。 その間、ボックス内の文字はさっぱり読めません。
このように、「文字が表示されているのに読めない」という状態は、閲覧者をイライラさせてしまうでしょう。
背景画像を指定していても、背景色も同時に指定！
画像の読み込みが完了するまでは文字も読めない……という事態を防ぐためには、背景画像と同時に背景色も指定しておきましょう。
先のサンプルでも、背景画像と同時に背景色を指定していれば、たとえ画像が表示されなくても、以下のように見せることができます。
上記では、背景色として淡い黄色（#FFFFCC）を指定しています。 これなら、画像が表示されるのを待たなくても、文字を読むことができます。
背景画像と同時に背景色を指定するには、スタイルシートで以下のように記述します。
※画像ファイルが「bksakura.jpg」で、背景色を淡い黄色（#FFFFCC）にしたい場合の例。
background-image: url("bksakura.jpg");
background-color: #FFFFCC;
背景画像を指定する background-image プロパティと同時に、背景色を指定する background-color プロパティも使って背景色を指定しておくだけです。 このように並べて記述しておけば、背景画像が表示されるまでの間は、指定した背景色が表示に使われます。
※背景画像が表示された後でも、画像内に透過部分があれば、そこには指定した背景色が使われます。 また、背景画像の表示領域を限定するよう記述した場合は、背景画像のない領域にも背景色が使われます。
おわりに
ページやボックスの背景に画像を使う場合は、必ずセットで背景色も指定しておくことを忘れないようにしましょう。 新たにページをデザインする際には常に、「画像が表示されなかった場合」の表示も確認することをお勧めいたします。
