background-image

background-imageは、背景に画像を指定するスタイルです。

解説

指定した要素の背景に画像ファイルをパスまたはURLで指定します。

どのように画像を表示させるかは、background-repeatで指定してください。
（画像を並べて表示するがデフォルトです）

構文

構文は以下になります。

値

background-imageには以下の値が指定できます。

太字の値はデフォルト値です。

サンプル

←この画像を背景に指定します。

背景画像に、パス「image/back01.png」を指定する

.sample01 {
  background-image:url('image/back01.png');
}

<div class="sample01">back01.png</div>

背景画像に、URL「http://xxx/back01.png」を指定する

.sample02 {
  background-image:url('http://xxx/back01.png');
}

<div class="sample02">back01.png</div>

URL「http://xxx/back01.png」が存在する前提です。

背景画像を指定しないことを明示する

.sample03 {
  background-image:none;
}

<div class="sample03">背景画像未指定</div>

備考

• 背景画像を指定しない（none）場合は、当スタイルを指定する必要はありません。

関連項目

• background：背景に関するスタイルをまとめて指定する
• background-color：背景色を指定する
• background-image：背景に画像を指定する
• background-repeat：背景画像の表示方法を指定する
• background-position：背景画像の位置を指定する
• background-attachment：背景画像のスクロール方法を指定する
• background-clip：背景画像を表示する範囲を指定する
• background-size：背景画像のサイズを指定する

Tweet