Question

I’m learning how to use the parallax effect with jQuery.

I’m doing well concerning the different sliders, but I have a gap issue when I start to scroll, the first background jumps down.

You can see the problem on my page here and by viewing the source code.

Is there any solutions to avoid this? I tried to change the margin values but I think it might be a ‘height’ problem, I’m not sure.

Here are some parts of my css code:

 body {
margin: 0;
padding: 0;
color:#fff;
font: normal 90% "Trebuchet MS",Verdana,"Lucida Grande",Tahoma,Arial,Helvetica,Sans-     Serif;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
}



#slide1, #slide2, #slide3 {
height: 1000px;
}

#slide1 {
background: url(images/bg/01.jpg) 50% 0 no-repeat fixed;
color: white;
height: 800px;
margin: 0;
overflow: hidden;
padding: 0;
}

#slide2 {
background: url(images/bg/02.jpg) center 0 no-repeat fixed;
color: white;
height: 1000px;
margin: 0 auto;
overflow: hidden;
padding: 0;
}

Answer 1

#slide1 height declared as 1000px, then added again as 800px? The second one will override the first one and might be where the gap is coming from.