Свойство background-origin
Задает область начального позиционирования фонового изображения
background-origin: padding-box;Пошаговый план! Как быстро научиться создавать сайты!
- поддерживается начиная с
- частичная поддержка до
- не поддерживается
Значения
background-origin: padding-box;
Фон позиционируется относительно края элемента. Учитывается толщина границы элемента border, но не учитывается внутренний отступ элемента padding
<style>
.example-1 {
width: 200px;
height: 200px;
padding: 20px;
border: 10px solid rgba(88, 201, 255, 0.5);
background-image: url(https://placem.at/places?w=200&h=200&txt=0&random=2);
background-origin: padding-box;
background-repeat: no-repeat;
}
</style>
<div class="example-1"></div>background-origin: border-box;
Фон позиционируется относительно края элемента, но будет размещен под границей элемента border, а так же не учитывается внутренний отступ элемента padding
<style>
.example-2 {
width: 200px;
height: 200px;
padding: 20px;
border: 10px solid rgba(88, 201, 255, 0.5);
background-image: url(https://placem.at/places?w=200&h=200&txt=0&random=2);
background-origin: border-box;
background-repeat: no-repeat;
}
</style>
<div class="example-2"></div>background-origin: content-box;
Фон позиционируется относительно содержимого элемента. Учитывается толщина границы элемента border и внутренний отступ элемента padding
<style>
.example-3 {
width: 200px;
height: 200px;
padding: 20px;
border: 10px solid rgba(88, 201, 255, 0.5);
background-image: url(https://placem.at/places?w=200&h=200&txt=0&random=2);
background-origin: content-box;
background-repeat: no-repeat;
}
</style>
<div class="example-3"></div>