Question

My site currently has a single, large, static image as its background image. I would like to add a looping slide-show of 3 images above the background image, but still below everything else. The slide-show images are just different sized white pngs with partial transparency, and should fade through smoothly into each other. The intended effect is to continually highlight different areas of the background image (the rest of the page will stay unaffected).

What must I add to my CSS file to place the slide-show above the background image but below everything else? Currently, for the single image I have:

body {
background-color: #000000;
background-image:url('/images/wallpaper.jpg');
background-attachment:fixed;
background-repeat:no-repeat;
background-position:top center;
color: #555; 
font: 70%/1.5  Verdana, 'Trebuchet MS', arial, sans-serif;
text-align: center; 
margin: 15px 0;
}

I found a jQuery application (Innerfade) for fading images, do I need to add anything to my body of my page to run it, or will everything work from the CSS?

Thankyou for any help!

Answer 1

You need to position the elements with different z-indexes.
For example

#slideshow{
position: relative;
z-index: 1;
}

#otherContent{
position: relative;
z-index: 2
}

The position is needed for z-index to work.
Now the slideshow has a lower z-index (depth in space) as the otherContent.

Hope this helps.