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

Свойство CSS background-origin задаёт область позиционирования фона — блок, от которого отсчитывается положение и откуда начинает отрисовываться background-image.

Каждый элемент состоит из трёх вложенных блоков: блок содержимого (content box, где располагаются текст и дочерние элементы), блок отступов (padding box, содержимое плюс padding) и блок рамки (border box, padding box плюс граница). Значение background-origin определяет, какой из этих блоков служит точкой отсчёта (верхним левым углом) для изображения и относительно какой области измеряется background-position.

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

Не путайте с background-clip. background-origin определяет, откуда изображение начинается; background-clip определяет, где нарисованный фон обрезается. Оба свойства принимают одинаковые ключевые слова, но отвечают на разные вопросы и часто используются вместе.

Свойство background-origin не влияет на фон со значением fixed: если background-attachment равно fixed, изображение позиционируется относительно viewport и background-origin игнорируется. Это одно из свойств CSS3.

Начальное значение	padding-box
Применяется к	Всем элементам. Также применяется к ::first-letter и ::first-line.
Наследуется	Нет.
Анимируемое	Нет.
Версия	CSS3
DOM Syntax	object.style.backgroundOrigin = "content-box";

Синтаксис

Синтаксис свойства CSS background-origin

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

Пример свойства background-origin:

Пример свойства CSS background-origin со значением padding-box

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example1 {
        border: 5px dashed #666;
        padding: 35px;
        background: url("/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg");
        background-repeat: no-repeat;
        background-origin: padding-box;
      }
    </style>
  </head>
  <body>
    <h2>Background-origin property example</h2>
    <p>Here the background-origin is set to "padding-box".</p>
    <div class="example1">
      <h2>Hello world.</h2>
      <p> Some text for example.</p>
    </div>
  </body>
</html>

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

Результат

Ниже показан пример, демонстрирующий разницу между padding-box и content-box.

Пример свойства background-origin со значениями "padding-box" и "content-box":

Пример свойства CSS background-origin со значениями padding-box и content-box

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example1 {
        border: 5px dashed #666;
        padding: 35px;
        background: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
        background-repeat: no-repeat;
        background-origin: padding-box;
      }
      .example2 {
        border: 5px dashed #666;
        padding: 35px;
        background: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
        background-repeat: no-repeat;
        background-origin: content-box;
      }
    </style>
  </head>
  <body>
    <h2>Background-origin property example</h2>
    <p>Here the background-origin is set to "padding-box" which is the default value of this property.</p>
    <div class="example1">
      <h2>Hello  world</h2>
      <p> Some text for example.</p>
    </div>
    <p>Here the background-origin is set to "content-box".</p>
    <div class="example2">
      <h2>Hello  world</h2>
      <p> Some text for example.</p>
    </div>
  </body>
</html>

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

В примере ниже показано, как задать два фоновых изображения для элемента div с разными значениями.

Пример свойства background-origin с различными значениями:

Пример свойства CSS background-origin со значениями content-box и border-box

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example1 {
        border: 5px double black;
        padding: 25px;
        background: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png"), url("/uploads/media/default/0001/02/aa55a168be25d7d121dcab8d67ad72ce021dcde3.png");
        background-repeat: no-repeat;
        background-origin: content-box, border-box;
      }
      #example2 {
        border: 5px double black;
        padding: 25px;
        background: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png"), url("/uploads/media/default/0001/02/aa55a168be25d7d121dcab8d67ad72ce021dcde3.png");
        background-repeat: no-repeat;
        background-origin: content-box, padding-box;
      }
      #example3 {
        border: 5px double black;
        padding: 25px;
        background: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png"), url("/uploads/media/default/0001/02/aa55a168be25d7d121dcab8d67ad72ce021dcde3.png");
        background-repeat: no-repeat;
        background-origin: content-box, content-box;
      }
    </style>
  </head>
  <body>
    <h2>Background-origin property example</h2>
    <p>Here the background-origin: content-box, border-box; is set:</p>
    <div id="example1">
      <h2>Hello World</h2>
      <p>The first background-image starts from the upper left corner of the content.</p>
      <p>The second background-image starts from the upper left corner of the border.</p>
    </div>
    <p>Here the background-origin: content-box, padding-box:</p>
    <div id="example2">
      <h2>Hello World</h2>
      <p>The first background image starts from the upper left corner of the content.</p>
      <p>The second background-image starts from the upper left corner of the padding edge.</p>
    </div>
    <p>Here the background-origin: content-box, content-box; is set:</p>
    <div id="example3">
      <h2>Hello World</h2>
      <p>Both background images start from the upper left corner of the content.</p>
    </div>
  </body>
</html>

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

Несколько фонов

Когда у элемента несколько фоновых изображений, разделённых запятыми, каждому из них можно задать отдельную область позиционирования — значения сопоставляются с изображениями по порядку. В примере выше background-origin: content-box, border-box; применяет content-box к первому изображению и border-box — ко второму. Если значений задано меньше, чем изображений, CSS повторяет список, заполняя оставшиеся.

Советы и особенности

Без фонового изображения свойство не работает. background-origin влияет только на то, откуда начинается изображение; на сплошной фоновый цвет оно не действует. Для управления областью отрисовки цвета используйте background-clip.
Эффект виден только при наличии пространства. При нулевом padding и отсутствии границы блок содержимого, padding box и border box совпадают, поэтому все три значения выглядят одинаково. Эффект проявляется только при наличии отступов и/или границы.
fixed отменяет действие свойства. Как отмечено выше, background-attachment: fixed позиционирует изображение относительно viewport, что делает background-origin неэффективным.
Используйте вместе с background-clip. Распространённый приём: background-origin: border-box; background-clip: padding-box; — изображение раскладывается от границы, но обрезается по краю отступов.

Поддержка браузерами

background-origin поддерживается во всех современных браузерах — Chrome, Firefox, Safari, Edge и Opera. Для текущих версий вендорные префиксы не требуются.

Значения

Значение	Описание	Попробовать
border-box	background-position отсчитывается от блока рамки, и фоновое изображение начинается от верхнего левого угла границы.	Попробовать »
padding-box	background-position отсчитывается от padding box, и фоновое изображение начинается от верхнего левого угла края отступов. Это значение по умолчанию.	Попробовать »
content-box	background-position отсчитывается от блока содержимого, и фоновое изображение начинается от верхнего левого угла содержимого.	Попробовать »
initial	Устанавливает свойство в значение по умолчанию.	Попробовать »
inherit	Наследует свойство от родительского элемента.

Практика

Что контролирует свойство CSS background-origin?

Начальное положение фонового изображения, заданного свойством background.Положение фонового изображения или цвета относительно border box, padding box или content box элемента.Разрешение фонового изображения.Скорость эффектов перехода для фонового изображения.Оно работает совместно с другими свойствами, такими как background-clip или background-size.