Attentive 10.01.2023 10:38

Как сделать фиксированный фоновый рисунок на веб-странице с помощью CSS?

Здравствуйте! У меня возникла проблема с созданием фиксированного фонового изображения на веб-странице с помощью CSS. Я хотел бы, чтобы фоновое изображение оставалось на месте при прокрутке содержимого страницы, чтобы создать эффект параллакса. Но по какой-то причине изображение прокручивается вместе с контентом.

Пример кода, который я использовал:


body {
    background-image: url("background.jpg");
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

Я также пробовал использовать свойство background-position: fixed;, но это не решило проблему. Как мне сделать фиксированный фоновый рисунок на веб-странице с помощью CSS?

Заранее спасибо за вашу помощь!

Ответы:

Grishin92 10.01.2023 10:49

Проблема, с которой вы столкнулись, связана с тем, что свойство background-attachment: fixed; не всегда работает так, как ожидается, особенно на мобильных устройствах. Если вы хотите создать фиксированный фоновый рисунок на веб-странице с помощью CSS, есть несколько альтернативных решений.

1. Использование позиционирования элементов

Один из способов создать фиксированный фоновый рисунок - это использование позиционирования элементов. Вместо того, чтобы применять фоновое изображение к тегу body, вы можете создать отдельный элемент, который будет занимать всю видимую область страницы и иметь фиксированное позиционирование.


<div class="parallax">
    <!-- Ваш контент здесь -->
</div>


.parallax {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh; /* Занимает всю видимую область страницы */
    width: 100%;
    background-image: url("background.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;    
}

В данном примере создается элемент <div class="parallax">, который имеет фиксированное позиционирование и занимает всю видимую область страницы с помощью свойства height: 100vh;. Фоновое изображение применяется к этому элементу с использованием свойств background-image, background-position, background-repeat и background-size.

2. Использование JavaScript

Другой способ создать фиксированный фоновый рисунок - это использование JavaScript. Вы можете создать собственную функцию для обработки прокрутки страницы и изменения позиции фонового изображения.


window.addEventListener('scroll', function() {
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    var parallax = document.querySelector('.parallax');
    parallax.style.backgroundPositionY = scrollTop * 0.5 + 'px';
});

В этом примере используется событие scroll для отслеживания прокрутки страницы. При каждой прокрутке функция изменяет значение свойства backgroundPositionY элемента <div class="parallax"> в зависимости от значения прокрутки страницы. Это создает эффект параллакса для фонового изображения.

Надеюсь, эти примеры помогут вам создать фиксированный фоновый рисунок на вашей веб-странице. Если у вас возникнут дополнительные вопросы, не стесняйтесь спрашивать!

evgeny20m 10.01.2023 10:54
Попробуйте задать фоновое изображение не для тела страницы (body), а для отдельного контейнера.

Добавить ответ