Topスタイルシートの基本イメージ > 背景に画像を表示する

背景に画像を表示する

背景画像を使って、ページをレイアウトすることで、ページ自体がゴージャスになったりします。
この背景画像をスタイルシートで設定することで、すぐに画像を表示・非表示できたり修正することができるので便利です。

背景を設定する上で一番重要なのは、上に乗っている文字が読めること。
背景が暗い場合は明るい文字を、背景が明るい場合は暗い文字を使用するのが基本です。


haikei{

background-color:#FF0;

background-image:url(○○.jpg);

background-repeat:no-repeat;

}

一度に設定することも出来ます。

haikei{

background:#FF0 url(○○.jpg) no-repeat;

}


「no-repeat」は画像を繰り返さない、ということです。
例えば横に連続させたい場合は「x-repeat」縦に連続させたい場合は「y-repeat」にします。

便利なソフトとして、富士通アクセシビリティ・アシスタンス - FUJITSU Japanがあります。
このColorSelectorは無料で配布されているものなのですが、アクセシビリティの高い背景色と文字色の組み合わせをリアルタイムに確認することが可能な、クリエイターの為の強力な支援ツールです。
でもWindowsXPのみ対応です(^。^;)

「背景に画像を表示する」関連本

Akasa Rira
みつけたきせき