Свойство background-origin
Описание
Определяет область позиционирования фонового рисунка. Оно не применяется, при background-attachment: fixed.
Синтаксис
background-origin: [padding-box | border-box | content-box];Подробности
| Значение | Описание |
| padding-box | Фон позиционируется относительно края элемента с учетом толщины границы. |
| border-box | Фон позиционируется относительно границы, при этом линия границы может перекрывать изображение. |
| content-box | Фон позиционируется относительно содержимого элемента. |
Пример
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
#div-test3 {
border: 20px solid lightcoral;
padding: 20px;
height: 200px;
background: url('https://mfs.gki-webik.ru/s?path=/images/regular/zoloto.webp') no-repeat;
background-origin: content-box;
}
</style>
<div id='div-test3'>
</div>
</body>
</html>Читайте также
Свойство gap
Устанавливает промежутки между строками и столбцами сетки. Это сокращение для row-gap и column-gap....
Свойство margin-left
Устанавливает величину отступа от левой границы текущего элемента до внутренней границы его родительского элемента....
Свойство flex
Сокращённое свойство, которое позволяет указать параметры элемента, чтобы он эффективно заполнял доступное пространство. Элементы могут быть растянуты...
Свойство border-bottom-style
Устанавливает стиль границы элемента....