Облегчить душу

background-origin

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

Песочница

div {
  border: 5px dashed #c26558;
  padding: 20px;
  background-origin: padding-box;
}

Краткая информация

Значение по умолчаниюpadding-box
НаследуетсяНет
ПрименяетсяКо всем элементам
АнимируетсяНет

Значения

padding-box
Фон позиционируется относительно края элемента с учетом толщины границы.
border-box
Фон позиционируется относительно границы, при этом линия границы может перекрывать изображение.
content-box
Фон позиционируется относительно содержимого элемента.

Значений может быть несколько (для каждого из множественных фоновых рисунков), при этом значения разделяются между собой запятой.

Результат использования значений свойства background-origin для элемента с рамкой толщиной 20 пикселей показан на рис. 1.

object-fit object-fit object-fit
padding-box border-box content-box

Рис. 1. Результат применения разных значений

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !