Egenskapen background-origin

Egenskapen background-origin anger hur bakgrundsbilden (specifikt bilden, inte fyllnaden) kommer att placeras i förhållande till elementet: en del av bakgrundsbilden kommer att gå in under kanten, bakgrunden kommer inte att gå in under kanten eller bakgrunden kommer endast att placeras över innehållet i elementet (det vill säga padding kommer att flytta bakgrunden).

Syntax

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

Värden

Värde	Beskrivning
`border-box`	Bakgrundsbilden går in under kanten.
`padding-box`	Bakgrundsbilden kommer inte att gå in under kanten.
`content-box`	Bakgrundsbilden kommer endast att vara över innehållet.

Standardvärde: padding-box.

Anmärkningar

Egenskapen background-origin fungerar inte, när background-attachment har värdet fixed. Även vid background-repeat i värdet repeat fungerar egenskapen background-origin alltid som med värdet border-box.

Exempel . Som standard

Som standard kommer bakgrunden inte att gå in 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;
}

Exempel . Värdet border-box

Nu kommer bakgrunden att gå in 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;
}

Exempel . Värdet content-box

Och nu kommer bakgrunden att flyttas in 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;
}

Exempel . Med background-repeat: repeat

Med background-repeat i värdet repeat fungerar egenskapen background-origin alltid, som med värdet border-box, det vill säga bakgrunden går alltid in 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 även

egenskapen background-clip,
som anger position för både bakgrundsbild och fyllnad
egenskapen background,
som är en genvägsegenskap för bakgrund