CODEWITHSUNDEEP
jqueryhtmlcss
S. Farooq
S. Farooq

Reputation: 218

Background Image moving out of container on Parallax Scrolling

I have two <div> on which I am trying to create a parallax scrolling effect. And I am using the same code for two of them to have that effect. For the first div it is working great. However, it is causing trouble for the other div, that being background image is moving out of the div. Here is the code:

HTML

<div id="div1">Some Content</div>
<div id="div3">Some Content</div>

CSS

#div1{
    height: 100vh;
}
#div1,#div3 {
z-index: 1;
position: relative;
width: 100%;
background: url("img/img3.jpg");
background-position: 50% 0%;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
overflow: hidden;
}

#div3 {
padding: 80px;
color: white;
}

JQUERY

$(window).scroll(function () {
   var wScroll = $(window).scrollTop();

   $('#div1,#div3').css({
       'background-position-y':"-" + wScroll / 2 +'px'
   });
});

Could it be that the height of image is not large enough? But, then it is working fine for the first div? Please Help!! Here is the link

Upvotes: 0

Views: 470

Answers (1)

Tyler Fowle
Tyler Fowle

Reputation: 569

Currently you are moving the background based on the window scrolltop only.

the farther down the page you go the more this will effect the elements. you need to take into consideration where the containing element is. you shouldnt start moving the background image until the element is visible within the viewport

Upvotes: 1

Related Questions