background-origin

Пример

Пусть фоновое изображение начинается с верхнего левого угла содержимого:

#example1 {
  border: 10px dashed black;
  padding: 25px;
  background: url(paper.gif);
background-repeat: no-repeat;
background-origin: content-box;
}

Попробуйте сами »

Определение background-origin

CSS свойство background-origin определяет исходное положение (область расположения фона) фонового изображения.

Примечание: Это свойство не действует, если background-attachment является "fixed".

Показ демо ❯

Значение по умолчанию:	padding-box
Унаследовано:	no
Анимируемый:	no. Читайте о animatable
Версия:	CSS3
JavaScript синтаксис:	object.style.backgroundOrigin="content-box" Попробуй

Поддержка background-origin

Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Свойство
background-origin	4.0	9.0	4.0	3.0	10.5

Синтаксис background-origin

background-origin: padding-box|border-box|content-box|initial|inherit;

Значения background-origin

Значение	Описание	Демонстрация
padding-box	Значение по умолчанию. Фоновое изображение начинается с верхнего левого угла края отступа	Демо ❯
border-box	Фоновое изображение начинается с верхнего левого угла рамки	Демо ❯
content-box	Фоновое изображение начинается с верхнего левого угла содержимого	Демо ❯
initial	Устанавливает для этого свойства значение по умолчанию. Читайте о initial
inherit	Наследует это свойство от своего родительского элемента. Читайте о inherit

Примеры background-origin

Пример

Установите два фоновых изображения для элемента <div>. Пусть фоновое изображение "paper.gif" начинается с верхнего левого угла края заполнения, а фоновое изображение "img_tree.gif" начинается с верхнего левого угла содержимого:

#example1 {
  border: 10px dashed black;
  padding: 25px;
background: url(img_tree.gif), url(paper.gif);
  background-repeat: no-repeat;
  background-origin: content-box, padding-box;
}

Попробуйте сами »