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);

style2.css

background-image: url(./img/bg1.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);

対応ブラウザ

  • IE4
  • IE5
  • IE6
  • IE7
  • IEMac
  • Netscape6
  • Netscape7
  • Firefox1
  • Firefox2
  • Firefox3
  • Opera6
  • Opera7
  • Opera8
  • Opera9
  • Safari1
  • Safari2
  • Safari3

仕様

なし

内容
url(【画像ファイル】)背景に画像ファイルを指定する
none背景に画像ファイルを使用しない
[初期値]

スポンサーリンク

関連記事

スポンサーリンク

ファイルの権限(所有者・パーミッション)を一括で変更する方法

ホームページ製作・web系アプリ系の製作案件募集中です。

上に戻る