Search code examples
javascriptjqueryhtmlcssparallax

Scrolling effect with background image fix

I am stuck with some paraallax effect.While visiting to some websites,I found this scrolling effect. here is the link

basically What actually it is.I tried fixing the background image still my background image gets move up when ever I scroll the page.Please help me.I have tried various tutorials.Still I am not able to get anything.I want scrolling effect just like the above link.There is a small strip which keeps on moving but the background image is fixed.Please help me.

here is the link of fiddle

css

{

    height:200px;
    width:100%;
    background-image:url('http://upload.wikimedia.org/wikipedia/commons/1/1b/View_of_Santa_Maria_del_Fiore_in_Florence.jpg');

}
#div3
{
height:400px;
    width:100%;
        background-color:lime;
}

html

<div id="div1">this is my first div</div>
<div id="div2">this is my second div</div>
<div id="div3">this is my third div</div>
Solution

  • If you want your background image to be fixed, you simply need to add the correct attribute.

    Add this to #div2

    background-attachment: fixed;

    And this will set the image position according to the page's top left corner instead of the div's.