background-imageプロパティ

background-imageプロパティは要素の背景画像を設定します。デフォルトでは、画像はそのコピーでブロック全体を敷き詰めますが、この動作はbackground-repeatプロパティで解除できます。

構文

cssセレクタ {
  background-image: url(画像へのパス);
}

cssセレクタ {
  background-image: none;
}

値

デフォルト値: none。

例

background-imageで背景画像を設定し、background-repeatプロパティで繰り返しを禁止します:

html<div id="elem"></div>

css#elem {
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 3px solid black;
}

Результат:

例

background-repeatがない場合、背景画像はブロック全体を敷き詰めます:

html<div id="elem"></div>

css#elem {
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 3px solid black;
}

Результат:

例

background-colorを使って背景画像と背景色を同時に設定できます。この場合、背景画像がない部分には背景色が表示されます:

html<div id="elem"></div>

css#elem {
  background-color: orange;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 3px solid black;
}

Результат:

関連項目