Својство background-origin

Својството background-origin одредува како позадинската слика (точно сликата, не пополнувањето) ќе се поставува во однос на елементот: дел од позадинската слика ќе навлегува под границата, позадината нема да навлегува под границата или позадината ќе се поставува само над содржината на елементот (односно padding ќе ја оддалечи позадината).

Синтакса

селектор {
	background-origin: padding-box | border-box | content-box;
}

Вредности

Вредност	Опис
`border-box`	Позадинската слика ќе навлезе под границата.
`padding-box`	Позадинската слика нема да навлегува под границата.
`content-box`	Позадинската слика ќе биде само над содржината.

Стандардна вредност: padding-box.

Забелешки

Својството background-origin не работи, кога background-attachment има вредност fixed. Исто така при background-repeat во вредност repeat својството background-origin секогаш работи, како при вредност border-box.

Пример . Стандардно

Стандардно позадината нема да навлегува под границата:

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

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

Пример . Вредност border-box

Сега позадината ќе навлезе под границата:

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

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

Пример . Вредност content-box

А сега позадината ќе се оддалечи преку 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;
}

Пример . При background-repeat: repeat

При background-repeat во вредност repeat својството background-origin секогаш работи, како при вредност border-box, односно позадината секогаш навлегува под границата:

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

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

Погледнете ги и

својство background-clip,
кое го задава позиционирањето и на позадинската слика, и на пополнувањето
својство background,
кое претставува кратенка за позадината