Properti background-image

Properti background-image mengatur gambar latar elemen. Secara default, gambar akan mengisi seluruh blok dengan salinannya, namun, perilaku ini dapat dinonaktifkan dengan menggunakan properti background-repeat.

Sintaks

cssselector {
  background-image: url(jalur ke gambar);
}

cssselector {
  background-image: none;
}

Nilai

Nilai default: none.

Contoh

Mari atur gambar latar menggunakan background-image, dan larang pengulangannya dengan menggunakan properti 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, gambar latar akan mengisi seluruh blok:

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

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

Результат:

Contoh

Anda juga dapat mengatur gambar latar dan mengatur warna latar secara bersamaan menggunakan background-color. Dalam hal ini, di area yang tidak tertutup oleh gambar latar - warna latar akan terlihat:

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