Lastnost background-origin

Lastnost background-origin določa, kako bo slika ozadja (prav slika, ne barvno polnilo) nameščena glede na element: del slike ozadja se bo raztezal pod mejo, ozadje se ne bo raztezalo pod mejo ali bo ozadje nameščeno samo nad vsebino elementa (to pomeni, da bo padding odrinil ozadje).

Sintaksa

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

Vrednosti

Vrednost	Opis
`border-box`	Slika ozadja se bo raztezala pod mejo.
`padding-box`	Slika ozadja se ne bo raztezala pod mejo.
`content-box`	Slika ozadja bo samo nad vsebino.

Privzeta vrednost: padding-box.

Opombe

Lastnost background-origin ne deluje, ko ima background-attachment vrednost fixed. Prav tako pri background-repeat z vrednostjo repeat lastnost background-origin vedno deluje kot pri vrednosti border-box.

Primer . Privzeto

Privzeto se ozadje ne bo raztezalo pod mejo:

<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

Zdaj se bo ozadje raztezalo pod mejo:

<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

Zdaj se bo ozadje odmaknilo zaradi 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 . Pri background-repeat: repeat

Pri background-repeat z vrednostjo repeat lastnost background-origin vedno deluje, kot pri vrednosti border-box, kar pomeni, da se ozadje vedno razteza pod mejo:

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

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

Glejte tudi

lastnost background-clip,
ki določa položaj tako za sliko ozadja kot za barvno polnilo
lastnost background,
ki je okrajšava za lastnosti ozadja