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

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

selector {
	background-image: none;
}

Nilai

Nilai	Keterangan
`url`	Jalur ke file gambar. Nama gambar dapat diapit tanda kutip ganda, tanda kutip tunggal, atau tanpa tanda kutip sama sekali.
`none`	Menonaktifkan gambar latar untuk elemen.

Nilai default: none.

Contoh

Mari atur gambar latar menggunakan background-image, dan larang pengulangannya dengan menggunakan properti background-repeat:

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

#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:

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

#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:

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

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

Lihat juga

properti background,
yang merupakan properti singkatan untuk latar