Sifat background-origin

Sifat background-origin menetapkan bagaimana gambar latar belakang (khususnya gambar, bukan warna latar) akan diletakkan relatif kepada elemen: sebahagian gambar latar belakang akan menjalar di bawah sempadan, latar belakang tidak akan menjalar di bawah sempadan atau latar belakang hanya akan diletakkan di atas kandungan elemen (iaitu padding akan mengalihkan latar belakang).

Sintaks

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

Nilai

Nilai	Keterangan
`border-box`	Gambar latar belakang akan menjalar di bawah sempadan.
`padding-box`	Gambar latar belakang tidak akan menjalar di bawah sempadan.
`content-box`	Gambar latar belakang hanya akan berada di atas kandungan.

Nilai lalai: padding-box.

Nota

Sifat background-origin tidak berfungsi, apabila background-attachment mempunyai nilai fixed. Juga dengan background-repeat pada nilai repeat, sifat background-origin sentiasa berfungsi seperti nilai border-box.

Contoh . Secara Lalai

Secara lalai, latar belakang tidak akan menjalar di bawah sempadan:

<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 belakang akan menjalar di bawah sempadan:

<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

Sekarang latar belakang akan dialihkan 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 . Dengan background-repeat: repeat

Dengan background-repeat pada nilai repeat, sifat background-origin sentiasa berfungsi, seperti nilai border-box, iaitu latar belakang sentiasa menjalar di bawah sempadan:

<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

sifat background-clip,
yang menetapkan kedudukan untuk kedua-dua gambar latar belakang dan warna latar
sifat background,
yang merupakan sifat singkatan untuk latar belakang