Ciri background-image

Ciri background-image menetapkan imej latar belakang untuk elemen. Secara lalai, imej akan menutup seluruh blok dengan salinannya, namun, tingkah laku ini boleh dibatalkan dengan menggunakan ciri background-repeat.

Sintaks

csspemilih {
  background-image: url(laluan ke imej);
}

csspemilih {
  background-image: none;
}

Nilai

Nilai lalai: none.

Contoh

Mari tetapkan imej latar belakang menggunakan background-image, dan melarang pengulangannya dengan menggunakan ciri 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;
}

Результат:

Contoh

Tanpa background-repeat, imej latar belakang akan menutup seluruh blok:

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

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

Результат:

Contoh

Anda boleh serentak menetapkan imej latar belakang dan menetapkan warna latar belakang menggunakan background-color. Dalam kes ini, di mana tiada imej latar belakang - warna latar belakang akan kelihatan:

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

Результат:

Lihat juga