Свойство 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;
    background-size: cover;
}
</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;
    background-size: cover;
}
</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;
    background-size: cover;
}
</style>
<div class="example-3"></div>

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

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии