Svojstvo background-origin

Svojstvo background-origin određuje kako će se pozadinska slika (tačnije slika, ne boja ispune) pozicionirati u odnosu na element: deo pozadinske slike će zalaziti ispod ivice, pozadina neće zalaziti ispod ivice ili će se pozadina nalaziti samo iznad sadržaja elementa (što znači da će ga padding odmaknuti od ivice).

Sintaksa

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

Vrednosti

Vrednost	Opis
`border-box`	Pozadinska slika će zalaziti ispod ivice.
`padding-box`	Pozadinska slika neće zalaziti ispod ivice.
`content-box`	Pozadinska slika će biti samo iznad sadržaja.

Podrazumevana vrednost: padding-box.

Napomene

Svojstvo background-origin ne radi, kada background-attachment ima vrednost fixed. Takođe, kada background-repeat ima vrednost repeat, svojstvo background-origin uvek radi kao sa vrednošću border-box.

Primer . Podrazumevano ponašanje

Podrazumevano, pozadina neće zalaziti ispod ivice:

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

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

Primer . Vrednost border-box

Sada će pozadina zalaziti ispod ivice:

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

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

Primer . Vrednost content-box

Sada će se pozadina odmaknuti od ivice zbog 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;
}

Primer . Sa background-repeat: repeat

Kada background-repeat ima vrednost repeat, svojstvo background-origin uvek radi kao sa vrednošću border-box, što znači da pozadina uvek zalazi ispod ivice:

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

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

Pogledajte takođe

svojstvo background-clip,
koje određuje poziciju i pozadinske slike i boje ispune
svojstvo background,
koje predstavlja skraćeni zapis za sve pozadinske postavke