Свойство background-origin задает то, как фоновая картинка будет размещаться относительно элемента: часть картинки фона будет залазить под границу, фон не будет залазить под границу или фон будет размещаться только над содержимым элемента (то есть padding отодвинет фон).

Это свойство не работает, когда background-attachment имеет значение fixed.

При background-repeat в значении repeat background-origin всегда работает как при значении border-box.

Есть очень похожее свойство background-clip с теми же значениями. Разница: background-origin задает позицию только фоновой картинки, а background-clip - фона вообще (и картинки, и просто заливки цветом через background-color).

Данное свойство входит в свойство-сокращение background.

См. все свойства для фона: background-attachment, background-color, background-image, background-position, background-repeat, background-size, background-origin, background-clip, background.

См. также тег img, с помощью которого можно сделать картинку в HTML коде.

Синтаксис

CSS 2.1

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

CSS 3

В CSS3 можно задавать несколько картинок одновременно, перечисляя их через запятую.

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

Значения

Значение Описание
border-box Фоновая картинка залезет под границу.
padding-box Фоновая картинка не будет залезать под границу.
content-box Фоновая картинка будет только над содержимым.

Значение по умолчанию: padding-box.

Примеры

Пример . Значение padding-box

В данном случае фон не заходит под границу:

#elem {
	background: url("/images/css/bg1.jpg") no-repeat;
	background-origin: padding-box;
	border: 20px dotted black;
	padding: 30px;
	width: 300px;
	height: 300px;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Пример . Значение content-box

А теперь фон будет только над текстом:

#elem {
	background: url("/images/css/bg1.jpg") no-repeat;
	background-origin: content-box;
	border: 20px dotted black;
	padding: 30px;
	width: 300px;
	height: 300px;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Пример . Значение border-box

Сейчас фон заходит под границу:

#elem {
	background: url("/images/css/bg1.jpg") no-repeat;
	background-origin: border-box;
	border: 20px dotted black;
	padding: 30px;
	width: 300px;
	height: 300px;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

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

При background-repeat в значении repeat background-origin всегда работает как при значении border-box:

#elem {
	background: url("/images/css/bg1.jpg") repeat;
	background-origin: content-box;
	border: 20px dotted black;
	padding: 30px;
	width: 300px;
	height: 300px;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.