Почему при background-attachment:fixed фон не следует за вию портом?
начал верстать по принципу mobile first, у самого верхнего блока есть следующие css стили:
width: 100vw;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-image: url(./img/bg2.png),url(./img/bg1.png);
background-repeat: no-repeat, no-repeat;
background-position: left top, right bottom;
// background-size: 83%, 40%;
background-color: rgba($color: #ffffff, $alpha: 0.7);
background-attachment: fixed, fixed;
дальше идет еще около 5-6 таких же блоков, но без фона, после адаптации только заметил что, задний фон при десктопной версии, следует за вию портом, а когда перехожу в режим моб версии, то задний фон остается только на первом блоке. как можно решить эту проблему
Дополнительно:
начал верстать по принципу mobile first
начни ещё с выклыдывания кода юзер-френдли
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема, с которой вы столкнулись, связана с тем, что при использовании CSS свойства background-attachment: fixed фоновое изображение не будет прокручиваться вместе с контентом на странице, а будет оставаться на месте, прикрепленным к видимой области окна браузера.
Это поведение может вызвать проблему, когда контент страницы прокручивается, но фоновое изображение остается на месте, не следуя за контентом. Это может создать нежелательный эффект, особенно если фоновое изображение должно быть видимым на всей протяженности страницы.
Чтобы исправить эту проблему и добиться того, чтобы фоновое изображение следовало за контентом при прокрутке страницы, можно воспользоваться следующими рекомендациями:
1. Используйте свойство background-attachment: scroll вместо background-attachment: fixed. Это позволит фоновому изображению прокручиваться вместе с контентом на странице.
2. Проверьте правильность разметки HTML и CSS. Убедитесь, что фоновое изображение устанавливается на нужный элемент и что другие стили не мешают корректному отображению.
3. При необходимости, можно использовать JavaScript для создания эффекта параллакса или других специфичных эффектов, связанных с фоновым изображением.
Приведу пример использования свойства background-attachment: scroll в CSS:
body { background-image: url('background.jpg'); background-attachment: scroll; }
Этот код позволит фоновому изображению прокручиваться вместе с контентом на странице. Надеюсь, эти рекомендации помогут вам решить проблему с фоновым изображением, не следующим за контентом при прокрутке страницы. Если у вас возникнут дополнительные вопросы, не стесняйтесь обращаться за помощью!