Egenskaben background-origin

Egenskaben background-origin angiver hvordan baggrundsbilledet (specifikt billedet, ikke udfyldningen) vil blive placeret i forhold til elementet: en del af baggrundsbilledet vil trænge ind under kanten, baggrunden vil ikke trænge ind under kanten eller baggrunden vil kun blive placeret over indholdet af elementet (det vil sige padding vil skubbe baggrunden væk).

Syntaks

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

Værdier

Værdi	Beskrivelse
`border-box`	Baggrundsbilledet trænger ind under kanten.
`padding-box`	Baggrundsbilledet vil ikke trænge ind under kanten.
`content-box`	Baggrundsbilledet vil kun være over indholdet.

Standardværdi: padding-box.

Bemærkninger

Egenskaben background-origin virker ikke, når background-attachment har værdien fixed. Også når background-repeat er sat til værdien repeat, virker egenskaben background-origin altid som med værdien border-box.

Eksempel . Standard

Som standard vil baggrunden ikke trænge ind under kanten:

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

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

Eksempel . Værdien border-box

Nu vil baggrunden trænge ind under kanten:

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

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

Eksempel . Værdien content-box

Og nu vil baggrunden blive skubbet væk via 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;
}

Eksempel . Med background-repeat: repeat

Med background-repeat sat til værdien repeat virker egenskaben background-origin altid, som med værdien border-box, det vil sige baggrunden trænger altid ind under kanten:

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

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

Se også

egenskaben background-clip,
som angiver position for både baggrundsbillede og udfyldning
egenskaben background,
som er en sammentrækning af egenskaber for baggrunden