background-image背景画像を指定する
説明
背景画像を指定する際に使用します。 背景画像は次のようなURLで指定します。
background-image: url(./img/bg_test.gif)
または
background-image: url("./img/bg_test.gif")
または
background-image: url(http://kikky.net/pc/img/bg_test.gif)
相対位置で記述する場合の基準位置は、『スタイルが記述されている場所』になります。
外部スタイルシートを使用する場合にはHTML文書とCSS文書の階層が違うと画像ファイルの指定も違うので注意してください。
HTML文書が基準ではなく、CSS文書が基準となります。
またCSS文書内でさらにCSS文書をインポート（呼び出し）している場合も、背景画像プロパティが記述されているCSS文書が基準となります。
- ルートディレクトリ
-
- css
-
- CSS文書(style1.css)
- img
-
- 画像ファイル(bg1.jpg)
-
- HTML文書(index.html)
- CSS文書(style2.css)
- 画像ファイル(bg2.jpg)
上のような場合の例
style1.css
background-image: url(../img/bg1.jpg);
background-image: url(../bg2.jpg);
background-image: url(../bg2.jpg);
style2.css
background-image: url(./img/bg1.jpg);
background-image: url(bg2.jpg);
background-image: url(bg2.jpg);
@importの例
style2.css
@import url("./css/style1.css");
style1.css
background-image: url(../img/bg1.jpg);
background-image: url(../bg2.jpg);
background-image: url(../bg2.jpg);
対応ブラウザ
- IE4
- IE5
- IE6
- IE7
- IEMac
- Netscape6
- Netscape7
- Firefox1
- Firefox2
- Opera6
- Opera7
- Opera8
- Opera9
- Safari1
- Safari2
仕様
CSS Level1
値
| 値 | 内容 |
|---|---|
| url(【画像ファイル】) | 背景に画像ファイルを指定する |
| none | 背景に画像ファイルを使用しない[初期値] |
ブラウザバグなど
外部スタールシートを使用する場合、背景画像ファイルの相対URL指定がHTML文書基準になる
背景画像ファイルのURL表記を『"』や『'』で囲うと、表示ができない
Safariで背景画像がはみ出る
背景△上に戻る
background背景に関する指定をまとめて行う
background-attachment背景画像の固定・移動を指定する
background-color背景色を指定する
background-image背景画像を指定する
background-position背景画像の表示開始位置を指定する
background-position-x背景画像の横位置を指定する
background-position-y背景画像の縦位置を指定する
background-repeat背景画像のリピートの仕方を指定する
主要ブラウザに非対応
