Egenskapen background-origin

Egenskapen background-origin angir hvordan bakgrunnsbildet (spesifikt bildet, ikke fyllingen) skal plasseres i forhold til elementet: en del av bakgrunnsbildet vil trenge inn under kanten, bakgrunnen vil ikke trenge inn under kanten eller bakgrunnen vil bare plasseres over innholdet i elementet (det vil si at padding vil skyve bakgrunnen bort).

Syntaks

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

Verdier

Verdi	Beskrivelse
`border-box`	Bakgrunnsbildet trenger inn under kanten.
`padding-box`	Bakgrunnsbildet vil ikke trenge inn under kanten.
`content-box`	Bakgrunnsbildet vil bare være over innholdet.

Standardverdi: padding-box.

Merknader

Egenskapen background-origin fungerer ikke, når background-attachment har verdien fixed. Også når background-repeat er satt til verdien repeat, vil egenskapen background-origin alltid fungere som med verdien border-box.

Eksempel . Standard

Som standard vil ikke bakgrunnen trenge inn 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 . Verdien border-box

Nå vil bakgrunnen trenge inn 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 . Verdien content-box

Og nå vil bakgrunnen skyves bort av 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 satt til repeat vil egenskapen background-origin alltid fungere som med verdien border-box, det vil si at bakgrunnen alltid trenger inn 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å

egenskapen background-clip,
som angir posisjon for både bakgrunnsbildet og fyllingen
egenskapen background,
som er en sammensatt egenskap for bakgrunn