Ominaisuus background-origin

Ominaisuus background-origin määrittää kuinka taustakuva (nimenomaan kuva, ei täyttö) sijoitetaan elementtiin nähden: osa taustakuvasta menee reunuksen alle, tausta ei mene reunuksen alle tai tausta sijoitetaan vain elementin sisällön päälle (eli padding siirtää taustaa).

Syntaksi

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

Arvot

Arvo	Kuvaus
`border-box`	Taustakuva menee reunuksen alle.
`padding-box`	Taustakuva ei mene reunuksen alle.
`content-box`	Taustakuva on vain sisällön päällä.

Oletusarvo: padding-box.

Huomiot

Ominaisuus background-origin ei toimi, kun background-attachment on arvossa fixed. Myös kun background-repeat on arvossa repeat, ominaisuus background-origin toimii aina kuin arvossa border-box.

Esimerkki . Oletusarvoisesti

Oletusarvoisesti tausta ei mene reunuksen alle:

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

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

Esimerkki . Arvo border-box

Nyt tausta menee reunuksen alle:

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

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

Esimerkki . Arvo content-box

Nyt tausta siirtyy padding:n takia:

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

Esimerkki . Kun background-repeat: repeat

Kun background-repeat on arvossa repeat, ominaisuus background-origin toimii aina kuin arvossa border-box, eli tausta menee aina reunuksen alle:

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

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

Katso myös

ominaisuus background-clip,
joka määrittää sekä taustakuvan että täyttöjen sijainnin
ominaisuus background,
joka on lyhennysominaisuus taustalle