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

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

pemilih {
	background-image: none;
}

Nilai

Nilai	Keterangan
`url`	Laluan ke fail imej. Nama imej boleh dalam tanda petik berganda, tanda petik tunggal atau tanpa tanda petik langsung.
`none`	Membatalkan imej latar belakang untuk elemen.

Nilai lalai: none.

Contoh

Mari tetapkan imej latar belakang menggunakan background-image, dan melarang pengulangannya dengan menggunakan ciri 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, imej latar belakang akan menutup seluruh blok:

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

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

<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

ciri background,
yang merupakan ciri singkatan untuk latar belakang