CSS :: Свойство background-origin

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

Если значение свойства background-attachment указано, как fixed, свойство background-origin не применяется.

Характеристики

Значение по умолчанию: padding-box.
Применяется: ко всем элементам.
Наследуется: нет.
Анимируется: нет.
JavaScript: object.style.backgroundOrigin="value".

Синтаксис

background-origin: padding-box | border-box | content-box[, [padding-box | border-box | content-box]]*

Значения

border-box – фоновое изображение позиционируется относительно левого верхнего угла элемента, включая содержимое, отступы и границы, при этом часть изображения может перекрываться линиями границ элемента.
padding-box – фоновое изображение позиционируется относительно левого верхнего угла области, включающей содержимое и внутренние отступы элемента, но не включающей границы элемента.
content-box – фоновое изображение позиционируется относительно левого верхнего угла области содержимого элемента (прямоугольная область без учета отступов и границ).

Разрешается указывать через запятую несколько параметров в случае использования более одного фонового изображения.

Ссылки

Официальный сайт W3C: https://www.w3.org/TR/css-backgrounds-3/#the-background-origin

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/background-origin

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>
	
	<style>
		p{
		padding: 3em;
		width: 200px;
		min-height: 40px;
		border: dashed green 12px;
		background-color: yellow;
		background-repeat: no-repeat;
		background-image: url("images/cabinet.png");
		}
		
		.background_origin_1{background-origin: border-box;}
		.background_origin_2{background-origin: padding-box}
		.background_origin_3{background-origin: content-box}
	</style>
	
</head>
<body>
	<p class="background_origin_1">border-box</p>
	<p class="background_origin_2">padding-box</p>
	<p class="background_origin_3">content-box </p>
</body>
</html>

Пример №1