Свойство background-attachment

Определяет, является ли позиция фонового изображения фиксированной в области просмотра, или прокручивается вместе со скроллом страницы

background-attachment: scroll;
  • поддерживается начиная с
  • частичная поддержка до
  • не поддерживается

Значения

background-attachment: scroll;

Фон фиксируется относительно элемента и не прокручивается с его содержимым

<style>
.example-1 {
    height: 100%;
    padding: 10px;
    background-image: url(https://placem.at/places?w=500&h=400&txt=0&random=2);
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-size: cover;
}
.example-1 h3 {
    background: #fff;   
}
</style>
<div class="example-1">
    <h3>Фон фиксируется относительно элемента и не прокручивается с его содержимым</h3>
</div>

Фон фиксируется относительно элемента и не прокручивается с его содержимым

background-attachment: fixed;

Фон фиксируется относительно области просмотра. Создается эффект "параллакс" - фоновое изображение двигается при скролле 

<style>
.example-2 {
    height: 100%;
    padding: 10px;
    background-image: url(https://placem.at/places?w=500&h=400&txt=0&random=2);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}
.example-2 h3 {
    background: #fff;   
}
</style>
<div class="example-2">
    <h3>Фон фиксируется относительно области просмотра</h3>
</div>

Фон фиксируется относительно области просмотра

background-attachment: local;

Фон фиксируется с учетом содержимого элемента: если элемент имеет механизм прокрутки, фон прокручивается с содержимым элемента

<style>
.example-3 {
    height: 200px;
    padding: 10px;
    overflow: auto;
    background-image: url(https://placem.at/places?w=400&h=250&txt=0&random=2);
    background-attachment: local;
    background-repeat: no-repeat;
}
.example-3 h3 {
    background: #fff;   
}
</style>
<div class="example-3">
    <h3>Фон фиксируется с учетом содержимого элемента</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, nesciunt, quasi, aperiam, voluptates dolor facere animi sit architecto neque repellendus veniam ipsa temporibus perferendis culpa ipsum consequatur aliquam consectetur omnis!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, nesciunt, quasi, aperiam, voluptates dolor facere animi sit architecto neque repellendus veniam ipsa temporibus perferendis culpa ipsum consequatur aliquam consectetur omnis!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, nesciunt, quasi, aperiam, voluptates dolor facere animi sit architecto neque repellendus veniam ipsa temporibus perferendis culpa ipsum consequatur aliquam consectetur omnis!</p>
</div>

Фон фиксируется с учетом содержимого элемента

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, nesciunt, quasi, aperiam, voluptates dolor facere animi sit architecto neque repellendus veniam ipsa temporibus perferendis culpa ipsum consequatur aliquam consectetur omnis!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, nesciunt, quasi, aperiam, voluptates dolor facere animi sit architecto neque repellendus veniam ipsa temporibus perferendis culpa ipsum consequatur aliquam consectetur omnis!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, nesciunt, quasi, aperiam, voluptates dolor facere animi sit architecto neque repellendus veniam ipsa temporibus perferendis culpa ipsum consequatur aliquam consectetur omnis!

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

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

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