A background-origin tulajdonság

A background-origin tulajdonság határozza meg, hogy a háttérkép (kifejezetten a kép, nem a kitöltés) hogyan helyezkedik el az elemhez viszonyítva: a háttérkép egy része a szegély alá nyúlhat, a háttér nem nyúlhat a szegély alá, vagy a háttér csak az elem tartalma fölé helyezkedik el (azaz a padding el fogja tolni a hátteret).

Szintaxis

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

Értékek

Érték	Leírás
`border-box`	A háttérkép a szegély alá nyúl.
`padding-box`	A háttérkép nem nyúlik a szegély alá.
`content-box`	A háttérkép csak a tartalom felett jelenik meg.

Alapértelmezett érték: padding-box.

Megjegyzések

A background-origin tulajdonság nem működik, amikor a background-attachment értéke fixed. Továbbá, ha a background-repeat értéke repeat, a background-origin tulajdonság mindig úgy viselkedik, mintha az értéke border-box lenne.

Példa . Alapértelmezés szerint

Alapértelmezés szerint a háttér nem nyúlik a szegély alá:

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

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

Példa . Border-box érték

Most a háttér a szegély alá nyúlik:

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

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

Példa . Content-box érték

Most pedig a háttér a padding miatt eltolódik:

<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;
}

Példa . Background-repeat: repeat esetén

Ha a background-repeat értéke repeat, a background-origin tulajdonság mindig úgy működik, mintha az értéke border-box lenne, azaz a háttér mindig a szegély alá nyúlik:

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

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

Lásd még

a background-clip tulajdonság,
amely mind a háttérkép, mind a háttérkitöltés pozícióját határozza meg
a background tulajdonság,
amely egy rövidítő tulajdonság a háttérhez