De eigenschap background-origin

De eigenschap background-origin bepaalt hoe de achtergrondafbeelding (specifiek de afbeelding, niet de kleurvulling) ten opzichte van het element wordt geplaatst: een deel van de achtergrondafbeelding zal onder de rand komen, de achtergrond zal niet onder de rand komen of de achtergrond wordt alleen boven de inhoud van het element geplaatst (dat wil zeggen, padding zal de achtergrond wegdrukken).

Syntaxis

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

Waarden

Waarde	Beschrijving
`border-box`	De achtergrondafbeelding komt onder de rand.
`padding-box`	De achtergrondafbeelding zal niet onder de rand komen.
`content-box`	De achtergrondafbeelding zal alleen boven de inhoud zijn.

Standaardwaarde: padding-box.

Opmerkingen

De eigenschap background-origin werkt niet, wanneer background-attachment de waarde fixed heeft. Ook bij background-repeat met de waarde repeat werkt de eigenschap background-origin altijd zoals bij de waarde border-box.

Voorbeeld . Standaard

Standaard komt de achtergrond niet onder de rand:

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

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

Voorbeeld . De waarde border-box

Nu komt de achtergrond onder de rand:

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

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

Voorbeeld . De waarde content-box

En nu wordt de achtergrond weggedrukt door de 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;
}

Voorbeeld . Bij background-repeat: repeat

Bij background-repeat met de waarde repeat werkt de eigenschap background-origin altijd zoals bij de waarde border-box, dat wil zeggen de achtergrond komt altijd onder de rand:

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

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

Zie ook

de eigenschap background-clip,
die de positie van zowel de achtergrondafbeelding als de kleurvulling bepaalt
de eigenschap background,
dat een verkorte eigenschap is voor de achtergrond