I use Parallax.js in my project. When scrolling down the page, a bar appears above the background image, which is tiled; Example problem I don’t know if this is important or not, but I use the Bootstrap grid and the background image is implemented like this:

<div class="container-fluid" data-parallax="scroll" data-image-src="img/BGimage1.jpg"> <div class="container"> <div class="row"> <div class="col-md-6"></div> <div class="col-md-6"></div> </div> </div> </div>

I’ll clarify that the bar appears below or above the “static” content, depending on whether the page is scrolling down or up, respectively. Checked in Chrome and Firefox.

    2 answers 2

    Found a solution. It turns out that in the settings of the plugin there was a parameter that hides this effect of inhibition. The parameter is called bleed.

     <div class="container-fluid" data-parallax="scroll" data-image-src="img/BGimage1.jpg" data-bleed="20"> <div class="container"> <div class="row"> <div class="col-md-6"></div> <div class="col-md-6"></div> </div> </div> </div>

      It was so. Take the picture to css and register it

       background: url(images/mybg.png) 100% 100% no-repeat; background-size:cover;
      • Unfortunately, I do not see the possibility of realizing the parallax effect in this way. - Pheel