Свойство CSS background-origin
Расположение фонового изображения внутри элемента зависит от свойства CSS background-origin.
Каждое из трёх его значений называет границу, от верхнего левого угла которой начинается изображение:
padding-box- граница отступа, от неё изображение начинается по умолчанию.border-box- граница рамки элемента.content-box- граница содержимого элемента.
Примечание: Если задать background-attachment значение «fixed», это свойство перестаёт действовать.
Пример
Здесь у трёх элементов div одинаковые рамка, внутренний отступ и неповторяющееся фоновое изображение, а значение background-origin у каждого своё, чтобы вы могли их сравнить.
Prompt
Создайте страницу с тремя элементами div, каждый с рамкой, внутренним отступом и фоновым изображением. Первый div использует
background-origin: padding-box, второй использует border-box, а третий использует content-box. Установите background-repeat: no-repeat для всех трёх, чтобы разница в позиционировании была видна.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS background-origin Property</title>
<style>
div.example {
border: 10px dashed black;
padding: 35px;
background-image: url("img_flwr.gif");
background-repeat: no-repeat;
margin-bottom: 20px;
height: 200px;
}
#div1 {
background-origin: padding-box;
}
#div2 {
background-origin: border-box;
}
#div3 {
background-origin: content-box;
}
</style>
</head>
<body>
<h2>CSS background-origin Property</h2>
<p>background-origin: padding-box (default):</p>
<div class="example" id="div1">
</div>
<p>background-origin: border-box:</p>
<div class="example" id="div2">
</div>
<p>background-origin: content-box:</p>
<div class="example" id="div3">
</div>
</body>
</html>