Omadus background-origin

Omadus background-origin määrab, kuidas taustapilt (täpsemalt pilt, mitte värvimine) paigutatakse elemendi suhtes: osa taustapildist ulatub piiri alla, taust ei ulatu piiri alla või taust paigutatakse ainult elemendi sisu kohale (see tähendab, et padding liigutab tausta eemale).

Süntaks

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

Väärtused

Väärtus	Kirjeldus
`border-box`	Taustapilt ulatub piiri alla.
`padding-box`	Taustapilt ei ulatu piiri alla.
`content-box`	Taustapilt on ainult sisu kohal.

Vaikeväärtus: padding-box.

Märkused

Omadus background-origin ei tööta, kui background-attachment omab väärtust fixed. Samuti, kui background-repeat on väärtusega repeat, töötab omadus background-origin alati nagu väärtusel border-box.

Näide . Vaikimisi

Vaikimisi ei ulatu taust piiri alla:

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

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

Näide . Väärtus border-box

Nüüd ulatub taust piiri alla:

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

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

Näide . Väärtus content-box

Nüüd nihkub taust padding tõttu eemale:

<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;
}

Näide . background-repeat: repeat korral

Kui background-repeat on väärtusel repeat, töötab omadus background-origin alati nagu väärtusel border-box, see tähendab, et taust ulatub alati piiri alla:

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

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

Vaata ka

omadus background-clip,
mis määrab nii taustapildi kui ka värvimise asukoha
omadus background,
mis on tausta lühendatud omadus