Parallax Effect without the use of background-attachment:fixed

Question

So I am trying to create a parallax style site much like this one. However, whereas they use background images with a 'fixed' attachment for the effect of the image not moving, I would like to use a jquery slideshow plugin. Basically, how can I achieve the 'fixed' attachment and background position of my images if they are contained in a slider? Currently the images in the slideshow just scroll through...

I'm happy to provide code samples slash any further information needed along the way

Thanks!

Hey romboards, could you please accept ScottS's answer. I had the same problem and his solution fits perfectly. — jnns

ScottS ScottS · Accepted Answer · 2012-02-24T02:41:12

Something like this should work (just example code [use semantic id's]):

<div id="SlideShowContainer">Slide Show Generates into this div</div>
<div id="AllOtherContentWrapper">All other content goes here</div>

Then set css to:

#SlideShowContainer {
   position: fixed;
   z-index: 0;
   top: 0; right: 0; bottom: 0; left: 0;
}

#AllOtherContentWrapper {
   position: relative; /* this could be absolute depending on application*/
   z-index: 1;
}

This should make the container for the slide show equal to the current screen size, and fix it in place (basically acting like a fixed background). Then the rest of the site will sit on top of that slide show in the other div.

Parallax Effect without the use of background-attachment:fixed

1 Answers