Question

I am working on a page where I am trying to create the illusion of a colored band wrapping around and behind a canvas.

To do this I have exported my graphics as two images – one which is to be located behind the canvas and one which is to be located in front.

For the canvas (.footer-container in the link below) I set position:relative and a z-index of 2, for the “behind” layer I set position:absolute and a z-index of 1 and for the “in-front” layer i did the same thing but with a z-index of 3.

But no matter what I do, I cannot seem to get any of my pictures to go behind the canvas. Currently the two IMG’s are nested in the div of the canvas, but I also tried same procedure where they where not. Also, I did a similar thing another place on the same page and it works – I really can’t seem to sort out what I am doing wrong?

Here is a link to the implementation:

http://dl.dropbox.com/u/706446/SFB%20html%20mockups/z-index-problem.html

Thanks!

Answer 1

I found a solution:

Don’t set a z-index on the div#footer-container.
Set the z-index of div.footer-stripes_back to -1.
You can delete the z-index of div.footer-stripes_front, it’s not neccessary and you can leave the DOM structure as it is.
Works for me in Chrome.