Свойство 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,
което е съкратено свойство за фона