javascript - Creating a parallax-like effect using an image that isn't the background -

I'm trying to create a scrolling effect that does not prefer JavaScript only (CSS only), but I understand I'm not it's possible, just looking for options.

My page looks like this:

< P> While scrolling down I want to place the background image as a parallax-like effect, move the background and frame of the body around and around the stack.

Here is a sample code for working:

HTML

& lt; Body & gt; & Lt; Div square = "border-bg" & gt; & Lt; Div class = "image-bg" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div square = "border-bg" & gt; & Lt; Div class = "spacer" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Body & gt;

css

  body {background-color: #aaa; } .border-bg {width: 80%; Margin: Auto 30px; Background color: #fff; Padding: 40px; } .image-bg {background: url ('http://i.imgur.com/7cM1oL6.jpg'); Height: 400px; Background size: Cover; }. Spencer {height: 900px; }  

I can see how this will work if the image was the background of the body, but as the body is sitting at the top, there is no way that I can change it alike Visual effects?

Change your .image-bg class to:

 . Image-bg {background: url ('http://i.imgur.com/7cM1oL6.jpg') was determined; Height: 400px; Background size: Cover; }  

This will prevent the image from scrolling

Updated bella: