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!

Answer 1

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.