Свойство 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,
представляющее собой свойство-сокращение для фона