Опубликовано: 18.08.2010 Последняя правка: 08.12.2015
CSS1CSS2CSS2.1CSS3
IEChromeFireFoxOperaSafari

background-origin

Изначально фоновое изображение позиционируется относительно внутренних краев рамки элемента. Используя свойство CSS background-origin можно изменить область HTML-элемента, относительно которой будет происходить это позиционирования.

Тип свойства

Назначение: цвет и фон.

Применяется: ко всем элементам.

Наследуется: нет.

Значения

Значением свойства background-origin является одно из ключевых слов, определяющее область позиционирования.

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

Процентная запись: не существует.

Значение по умолчанию: padding-box.

Свойство background-origin не будет работать, если background-attachment имеет значение fixed.

Синтаксис

background-origin: padding-box | border-box | content-box

Пример CSS: использование background-origin

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS свойство background-origin</title>
  <style type="text/css">
   div {
    width: 200px; /* ширина блоков DIV */
    height: 41px; /* высота DIV */
    text-align: right; /* выравнивание текста по правому краю */
    background: url('images/fly.gif') no-repeat; /* изображение-фон с запретом размножения */
    border: #000 10px solid; /* стиль рамки */
    margin: 5px; /* размер внешних полей */
    padding: 10px; /* внутренние отступы */
   }
   .div2 {
    background-origin: border-box; /* фон со значением padding-box */
   }
   .div3 {
    background-origin: content-box; /* фон со значением content-box */
   }
  </style>
 </head>
 <body>
  <div>DIV с padding-box.</div>
  <div class="div2">DIV с border-box.</div>
  <div class="div3">DIV с content-box.</div>
 </body>
</html>

Результат примера

Результат. Использование свойства CSS background-origin.

Использование свойства CSS background-origin

Версии CSS

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:НетНетНетДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:До 9.09.0 и вышеДо 4.04.0 и вышеДо 4.04.0 и вышеДо 10.510.5 и вышеДо 5.05.0 и выше
Поддержка:НетДаНетДаНетДаНетДаНетДа
CSS по алфавиту
CSS по назначению