background-origin

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

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

background-origin: border-box;
background-repeat: no-repeat;

background-origin: padding-box;
background-repeat: no-repeat;

background-origin: content-box;
background-repeat: no-repeat;

<section id="default-example">
  <div id="example-element">This is the content of the element.</div>
</section>

#example-element {
  background-image: url("/shared-assets/images/examples/leopard.jpg");
  color: #d73611;
  text-shadow: 2px 2px black;
  padding: 20px;
  border: 10px dashed #333;
  font-size: 2em;
  font-weight: bold;
}

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

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

Синтаксис

css

/* Ключевые слова */
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 = 
  <visual-box>#  

<visual-box> = 
  content-box  |
  padding-box  |
  border-box

Примеры

css

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

css

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

css

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	повторяющийся список из

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

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

background-clip