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

Значение по умолчанию: padding-box
Применяется к: Все элементы. Это также относится к ::first-letter и ::first-line
Наследование: Нет
Анимирование: Нет. Анимируемые свойства
Версия: Новый в CSS3

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

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

Примеры написания кода свойства background-origin:

.box {
    width: 250px;
    height: 150px;
    padding: 10px;
    border: 6px dashed #333;
    background: url("images/sky.jpg") no-repeat;
    background-size: contain;
    background-origin: content-box;
} 

Свойство background-origin игнорируется, если значение свойства background-attachment указано как fixed.

Значения свойств

В следующей таблице описаны значения этого свойства.

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

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

Свойство background-origin поддерживается во всех основных браузерах.

Читайте также

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.