Свойство 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('/files/images/regular/zoloto.webp') no-repeat;
background-origin: content-box;
}
</style>
<div id='div-test3'>
</div>
</body>
</html>

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