background-origin | Справочник CSS
http://belarusweb.net
Основы создания сайтов

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 – фоновое изображение позиционируется относительно левого верхнего угла области содержимого элемента (прямоугольная область без учета отступов и границ).

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

Ссылки

Примеры

HTML Результат BwCodes
<!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