Properti background-origin

Properti background-origin mengatur bagaimana gambar latar (khusus gambar, bukan isian) akan ditempatkan relatif terhadap elemen: bagian dari gambar latar akan masuk di bawah batas, latar tidak akan masuk di bawah batas atau latar hanya akan ditempatkan di atas konten elemen (yaitu padding akan menggeser latar).

Sintaks

selektor {
	background-origin: padding-box | border-box | content-box;
}

Nilai

Nilai	Keterangan
`border-box`	Gambar latar akan masuk di bawah batas.
`padding-box`	Gambar latar tidak akan masuk di bawah batas.
`content-box`	Gambar latar hanya akan berada di atas konten.

Nilai default: padding-box.

Catatan

Properti background-origin tidak bekerja, ketika background-attachment memiliki nilai fixed. Juga ketika background-repeat dalam nilai repeat, properti background-origin selalu bekerja, seperti pada nilai border-box.

Contoh . Default

Secara default, latar tidak akan masuk di bawah batas:

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

#elem {
	background-image: url("bg.png");
	background-repeat: no-repeat;
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

Contoh . Nilai border-box

Sekarang latar akan masuk di bawah batas:

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

#elem {
	background-origin: border-box;
	background-image: url("bg.png");
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

Contoh . Nilai content-box

Dan sekarang latar akan digeser oleh padding:

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

#elem {
	background-origin: content-box;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

Contoh . Pada background-repeat: repeat

Pada background-repeat dengan nilai repeat, properti background-origin selalu bekerja, seperti pada nilai border-box, artinya latar selalu masuk di bawah batas:

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

#elem {
	background-repeat: repeat;
	background-image: url("bg.png");
	border: 10px dashed black;
	padding: 30px;
	width: 350px;
	height: 300px;
}

Lihat juga

properti background-clip,
yang mengatur posisi baik untuk gambar latar maupun isian
properti background,
yang merupakan properti singkatan untuk latar