background-imageプロパティは、背景画像の指定をするプロパティです。

対応ブラウザ

• 
• 
• 
• 
• 
• 
• 

プロパティの解説

値

<URI>｜none｜inherit

初期値

none

適用される要素

全ての要素

継承

しません

パーセント値

N/A

メディア

visual

値の解説

<URI>

背景画像の場所を、CSSファイルの位置を基準にして指定します

none

背景を使用しません

background-imageのサンプル

div.item {
  background-image: url(../img/share/bg_footer.gif);
  background-color: #0d236e;
  margin: 10px 10px 20px;
  padding: 15px 15px 150px;
}

div.item p {
  color: white;
}

背景画像を使う場合は、同時に背景色の指定もしておきます。
これにより画像が何らかの理由で読み込まれない場合にテキストが見えなくなるといった事が防げたり読み込みに時間がかかっている場合でも素早く見えるようになります。

以下の画像を背景として表示しています。

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

background-imageのサンプル