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

Question

[skillnett]

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

Что еще нужно прописать, чтобы при движении курсора и соответственно самого фона не видно границ фонового изображения?

Comments

[lloydbanks]

Скиньте ссылку

Answer 1

[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 чтобы не было конфликта.

Comments

[skillnett]

Все оказывает так просто.. Спасибо! Очень помогли