Scrolling effect with background image fix

Question

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>

• Tushar: Please share code through jsfiddle or codepen.
• Tushar: Here is the updated fiddle jsfiddle.net/v9Kvy/17 you need to add background-attachment: fixed; for #div2

Answer 1

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.

Answer 2

Parallax effects are created by manipulating multiple image using JavaScript and CSS. To get started refer Parallax effect tutorial , Some more parallax effect tutorials

• Abhishek: thanks for the reply.but did you understood what actually i want.Basically I need the same effect.Link will not work