⑦ Область расположения фона: свойство background-origin

Продолжим изучение темы CSS - фон. Если пропустили прошлые статьи, то вот ссылки на них:

• ① Базовый цвет: свойство background-color
• ② Источник изображения: свойство background-image
• ③ Укладка изображений: свойство background-repeat
• ④ Фиксация изображения: свойство background-attachment
• ⑤ Позиционирование изображений: свойство background-position
• ⑥ Область рисования: свойство background-clip

Свойство background-origin указывает область расположения фона для элементов, которые выводятся на экране как единый блок (например, не абзацы текста).

Свойство не наследуется.

background-origin

Значения:

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

Синтаксис

CSS

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

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

Если для элемента заданы background-clip: padding-box, background-origin: border-box, background-position: top left, и элемент имеет ненулевую рамку, тогда верхняя и левая части фонового изображения будет обрезаны.

Продолжение в следующей статье!