Īpašība background-origin

Īpašība background-origin nosaka, kā fona attēls (tieši attēls, ne aizpildījums) tiks novietots attiecībā pret elementu: daļa no fona attēla ieslīdēs zem apmales, fons neieslīdīs zem apmales vai fons tiks novietots tikai virs elementa satura (tas ir, padding atvirzīs fonu).

Sintakse

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

Vērtības

Vērtība	Apraksts
`border-box`	Fona attēls ieslīdīs zem apmales.
`padding-box`	Fona attēls neieslīdīs zem apmales.
`content-box`	Fona attēls būs tikai virs satura.

Noklusējuma vērtība: padding-box.

Piezīmes

Īpašība background-origin nestrādā, kad background-attachment ir ar vērtību fixed. Arī, ja background-repeat ir ar vērtību repeat, īpašība background-origin vienmēr darbojas, kā ar vērtību border-box.

Piemērs . Pēc noklusējuma

Pēc noklusējuma fons neieslīdīs zem apmales:

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

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

Piemērs . Vērtība border-box

Tagad fons ieslīdīs zem apmales:

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

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

Piemērs . Vērtība content-box

Bet tagad fons tiks atvirzīts ar 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;
}

Piemērs . Ar background-repeat: repeat

Ar background-repeat vērtībā repeat īpašība background-origin vienmēr darbojas, kā ar vērtību border-box, tas ir, fons vienmēr ieslīd zem apmales:

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

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

Skatiet arī

īpašība background-clip,
kura nosaka gan fona attēla, gan aizpildījuma pozīciju
īpašība background,
kas ir saīsinājuma īpašība fonam