Die background-origin Eienskap

Die eienskap background-origin bepaal hoe die agtergrondbeeld (spesifiek die beeld, nie die kleurvulling nie) relatief tot die element geplaas sal word: 'n deel van die agtergrondbeeld sal onder die grens inloop, die agtergrond sal nie onder die grens inloop nie of die agtergrond sal slegs oor die inhoud van die element geplaas word (dit beteken padding sal die agtergrond wegskuif).

Sintaksis

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

Waardes

Waarde	Beskrywing
`border-box`	Die agtergrondbeeld sal onder die grens inloop.
`padding-box`	Die agtergrondbeeld sal nie onder die grens inloop nie.
`content-box`	Die agtergrondbeeld sal slegs oor die inhoud wees.

Standaardwaarde: padding-box.

Opmerkings

Die eienskap background-origin werk nie, wanneer background-attachment die waarde fixed het nie. Ook met background-repeat met die waarde repeat werk die eienskap background-origin altyd soos met die waarde border-box.

Voorbeeld . Standaard

Standaard sal die agtergrond nie onder die grens inloop nie:

<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 . Die border-box waarde

Nou sal die agtergrond onder die grens inloop:

<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 . Die content-box waarde

En nou sal die agtergrond weggeskuif word deur die 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 . Met background-repeat: repeat

Met background-repeat op die waarde repeat werk die eienskap background-origin altyd, soos met die waarde border-box, dit beteken die agtergrond loop altyd onder die grens in:

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

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

Sien ook

die eienskap background-clip,
wat die posisie van beide die agtergrondbeeld en die kleurvulling bepaal
die eienskap background,
wat 'n verkorte eienskap vir die agtergrond is