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
Фон располагается относительно поля содержимого.

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

<box>#

где
<box> = border-box | padding-box | 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;
}

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

Спецификация Статус Комментарий
CSS Backgrounds and Borders Module Level 3
Определение 'background-origin' в этой спецификации.
Кандидат в рекомендации Первоначальное определение
Начальное значениеpadding-box
Применяется квсе элементы. Это также применяется к ::first-letter и ::first-line.
Наследуетсянет
Отображениевизуальный
Обработка значениякак указано
Animation typediscrete
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
background-originChrome Полная поддержка 1
Полная поддержка 1
Нет поддержки 1 — 64
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Chrome accepts alternate synonyms to its values: padding, border, and content.
Edge Полная поддержка 12Firefox Полная поддержка 4
Полная поддержка 4
Полная поддержка 49
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Нет поддержки 1 — 4
С префиксом Замечания
С префиксом Требует вендорный префикс: -moz-
Замечания Used the -moz-background-clip: padding | border syntax.
IE Полная поддержка 9
Замечания
Полная поддержка 9
Замечания
Замечания In IE 7 and before, Internet explorer was behaving as if background-origin: border-box was set. In Internet Explorer 8, as if background-origin: padding-box, the regular default value, was set.
Opera Полная поддержка 10.5
Полная поддержка 10.5
Нет поддержки 15 — 51
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Opera accepts alternate synonyms to its values: padding, border, and content.
Safari Полная поддержка 3
Полная поддержка 3
Полная поддержка 3
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Webkit accepts alternate synonyms to its values: padding, border, and content.
WebView Android Полная поддержка 4.1
Полная поддержка 4.1
Нет поддержки 4.1 — 64
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания WebView accepts alternate synonyms to its values: padding, border, and content.
Chrome Android Полная поддержка 18
Полная поддержка 18
Нет поддержки 18 — 64
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Chrome accepts alternate synonyms to its values: padding, border, and content.
Firefox Android Полная поддержка 14
Полная поддержка 14
Полная поддержка 49
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Opera Android Полная поддержка 11
Полная поддержка 11
Нет поддержки 14 — 47
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Opera accepts alternate synonyms to its values: padding, border, and content.
Safari iOS Полная поддержка 1
Полная поддержка 1
Полная поддержка 1
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Webkit accepts alternate synonyms to its values: padding, border, and content.
Samsung Internet Android Полная поддержка 1.0
content-boxChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 4IE Полная поддержка 9
Замечания
Полная поддержка 9
Замечания
Замечания In IE 7 and IE 9 of Internet Explorer, it always behaved like background-clip: padding if overflow: hidden | auto | scroll.
Opera Полная поддержка 10.5Safari Полная поддержка 3WebView Android Полная поддержка 4.1Chrome Android Полная поддержка 18Firefox Android Полная поддержка 14Opera Android Полная поддержка 11Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0

Легенда

Полная поддержка  
Полная поддержка
Смотрите замечания реализации.
Смотрите замечания реализации.
Требует вендорный префикс или другое имя для использования.
Требует вендорный префикс или другое имя для использования.

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