background-origin

CSS свойство background-origin устанавливает область расположения фона. Другими словами, оно устанавливает исходную позицию изображения, установленную с помощью свойства background-image.

Интерактивный пример

Обратите внимание, что background-origin игнорируется, когда background-attachment является fixed.

Примечание: Сокращение background сбрасывает значения этого свойства к его начальному значению, если оно не указано.

Синтаксис

/* Ключевые значения */
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

/* Глобальные значения */
background-origin: inherit;
background-origin: initial;
background-origin: unset;

Свойство background-origin указывается в качестве одного из значений ключевых слов, перечисленных ниже.

Значения

border-box: Фон располагается относительно рамки.
padding-box: Фон расположен относительно поля отступа.
content-box: Фон располагается относительно поля содержимого.

Официальный синтаксис

background-origin = 
  <box># (en-US)  

<box> = 
  border-box   | (en-US)
  padding-box  | (en-US)
  content-box

Примеры

.example {
  border: 10px double;
  padding: 10px;
  background: url('image.jpg');
  background-position: center left;
  background-origin: content-box;
}

#example2 {
  border: 4px solid black;
  padding: 10px;
  background: url('image.gif');
  background-repeat: no-repeat;
  background-origin: border-box;
}

div {
  background-image: url('logo.jpg'), url('mainback.png'); /* Applies two images to the background */
  background-position: top right, 0px 0px;
  background-origin: content-box, padding-box;
}

Спецификации

Specification
CSS Backgrounds and Borders Module Level 3 # the-background-origin

Начальное значение	`padding-box`
Применяется к	все элементы. Это также применяется к `::first-letter` и `::first-line`.
Наследуется	нет
Обработка значения	как указано
Animation type	discrete

Совместимость браузеров

BCD tables only load in the browser

Смотрите также

background-clip