background-image
CSSの書き方
background-image:url (画像のURI) ;
| CSSの詳細情報 | |||||
|---|---|---|---|---|---|
| プロパティ名 | background-image | 読み方 | バックグラウンド・イメージ | ||
| 初期値 | none | 意味 | 背景画像の挿入 | ||
| 値 | 背景画像へのパス | ||||
| 対象 | すべての要素 | ||||
| CSSレベル | CSSレベル1 | 対応ブラウザ | Windows | MAC | |
| 継承 | しない | IE 5.0以上/FF1.0/NS7.1/OP8.0 | SF/IE5.0 | ||
解説
「background-image」プロパティは、ページや要素に背景を表示するスタイルシートです。
値には「url(背景として使用する画像への絶対または相対パス)」を記述します。
相対パスについて
ここで指定する画像へのパスですが、相対パスで記述する場合の基準ディレクトリに注意してください。
外部CSSファイルを読み込んでいる場合は、外部CSSファイルが格納されるディレクトリになります。
一方、ページに直接「background-image」プロパティを指定している場合はそのページが格納されているディレクトリが基準となります。
繰り返し表示について
「background-image」プロパティで設定された画像は、ブラウザによって横方向と縦方向に繰り返して表示されます。
繰り返しの仕方を指定するには、別途「background-repeat」プロパティで行います。
また、繰り返しの開始位置や、画像の表示位置については「background-position」プロパティで行います。
背景色も同時に設定できる？
できます。
背景色の設定は「background-color」プロパティで可能ですが、この「background-color」プロパティと「background-image」プロパティを同時に設定することもできます。
同時に設定した場合は、「background-image」プロパティが優先されて表示されます。
ただし、背景画像に透過処理をした画像（透過GIFなど）を使用していた場合は、透過部分に背景色が透過されて表示されます。
CSS/HTMLサンプル
body { background-image:url(../img/bg.gif); }
BODY要素に背景画像を指定 サンプル
