要素の背景画像を指定する

background-image

{ background-image バックグラウンド・イメージ :画像; }

background-imageプロパティは、要素の背景画像を指定します。

初期値 none
継承 なし
適用される要素 すべての要素
モジュール Backgrounds and Borders Module Level 3

値の指定方法

画像

url() 関数型の値です。括弧内に背景画像のURLを指定します。カンマ(,)で区切って複数の画像を指定でき、その場合は先に指定した画像が前面に、後に指定した画像が背面に配置されます。
none 背景画像を指定しません。

サンプルコード

body{
  background-image: url(bg_body.png);
}

ポイント

  • 濃い色の背景画像に淡い色のテキストを合わせる場合は、background-colorプロパティを併用して濃い背景色を指定しましょう。背景画像の読み込みが完了するまで時間がかかる場合、あるいは背景画像を読み込めなかった場合にテキストが読めなくなることを防げます。