Својство 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,
које представља скраћеницу за позадину