w3docs logo

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

Свойство background-origin определяет область позиционирования свойства background-image.

Если значение background-attachment задано как "fixed", свойство background-origin не будет иметь эффекта.

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

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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</h2>
    <p>Здесь установлено значение "border-box".</p>
    <div class="example1">
      <h2>Hello world.</h2>
      <p> Какой-либо текст.</p>
    </div>
  </body>
</html>

Пример с тремя значениями:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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</h2>
    <p>Здесь установлено значение "padding-box", которое является значением по умолчанию этого свойства.</p>
    <div class="example1">
      <h2>Hello  world</h2>
      <p> Какой-либо текст.</p>
    </div>
    <p>Здесь установлено значение "content-box".</p>
    <div class="example2">
      <h2>Hello  world</h2>
      <p> Какой-либо текст.</p>
    </div>
    </div>
  </body>
</html>

Пример, где можно увидеть, как установить две фоновые изображения для <div> элемента с разными значениями:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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</h2>
    <p>Здесь установлено свойство background-origin: content-box, border-box:</p>
    <div id="example1">
      <h2>Hello World</h2>
      <p>Первое фоновое изображение начинается с левого верхнего угла границы.</p>
      <p>Второе фоновое изображение начинается с левого верхнего угла контента.</p>
    </div>
    <p>Здесь установлено свойство background-origin: content-box, padding-box:</p>
    <div id="example2">
      <h2>Hello World</h2>
      <p>Первое фоновое изображение начинается с левого верхнего угла отступа.</p>
      <p>Второе фоновое изображение начинается с левого верхнего угла контента.</p>
    </div>
    <p>Здесь установлено свойство background-origin: content-box, content-box:</p>
    <div id="example3">
      <h2>Hello World</h2>
      <p>Обе изображения начинаются с левого верхнего угла контента.</p>
    </div>
  </body>
</html>

Значения

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

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

chrome firefox safari opera
15.0+ 4.0+
3.6 -moz- 		7.0+ 11.5+
10.1 -o-

Практикуйте свои знания

What does the CSS property 'background-origin' do?
Считаете ли это полезным?