Proprietatea background-origin

Proprietatea background-origin stabilește modul în care imaginea de fundal (mai exact imaginea, nu culoarea de fundal) va fi plasată în raport cu elementul: o parte a imaginii de fundal va pătrunde sub bordură, fundalul nu va pătrunde sub bordură sau fundalul va fi plasat doar peste conținutul elementului (adică padding va îndepărta fundalul).

Sintaxă

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

Valori

Valoare	Descriere
`border-box`	Imaginea de fundal va pătrunde sub bordură.
`padding-box`	Imaginea de fundal nu va pătrunde sub bordură.
`content-box`	Imaginea de fundal va fi doar peste conținut.

Valoarea implicită: padding-box.

Observații

Proprietatea background-origin nu funcționează, când background-attachment are valoarea fixed. De asemenea, când background-repeat are valoarea repeat, proprietatea background-origin întotdeauna funcționează ca și cu valoarea border-box.

Exemplu . Implicit

Implicit, fundalul nu va pătrunde sub bordură:

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

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

Exemplu . Valoarea border-box

Acum fundalul va pătrunde sub bordură:

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

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

Exemplu . Valoarea content-box

Iar acum fundalul se va distanța datorită 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;
}

Exemplu . Cu background-repeat: repeat

Când background-repeat are valoarea repeat, proprietatea background-origin întotdeauna funcționează ca și cu valoarea border-box, adică fundalul întotdeauna pătrunde sub bordură:

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

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

Vezi și

proprietatea background-clip,
care stabilește poziția atât pentru imaginea de fundal, cât și pentru culoarea de fundal
proprietatea background,
reprezentând o proprietate scurtă pentru fundal