@skillnett

Как сделать, чтобы фон заполнял постоянно все пространство при parallax?

Здравствуйте! Помогите разобраться, я уже голову сломал.. Я сделал parallax-эффект движения фона в зависимости от координат курсора. Мне надо, чтобы при движении фона не было видно границ изображения.
В CSS у меня
height: 100vh;
backgroud: url(...);
background-size:cover;

Что еще нужно прописать, чтобы при движении курсора и соответственно самого фона не видно границ фонового изображения?
  • Вопрос задан
  • 230 просмотров
Решения вопроса 1
lamer350
@lamer350
กำลังสูงสุด
Можно увеличить масштаб изображения до 110% (или больше, в зависимости от коэффициента смещения относительно курсора) и тогда будет запас для передвижения.
Так как вы используете background-size:cover; то у вас не получится использовать масштаб для фона, выход будет таким:
1. Завернуть контейнер фона в еще один контейнер, например:
<div class="wrapper">
   <div class="background"></div>
</div>


2. Тогда в CSS:
.wrapper{
   height: 100vh;
   width: 100%;
   overflow: hidden;
   position: relative;
}
.background{
   width: 110%;
   height: 110%;
   margin: -5%;
   /* ваш остальной css код для фона */
}

Так же стоит обратить внимание что для контейнера background нужно использовать margin либо top/left в зависимости от того чем манипулирует ваш плагин parallax чтобы не было конфликта.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы