How would I get an img element to render under a background-image in CSS.

Question

Basically, I am trying to put a semi-transparent div over an image to serve as a background for text for a slideshow. Unfortunately, the browser seems intent on always rendering the img over the background-image. Is there any way to fix this?

Here is my current CSS for the semi-transparent div:

#slideshow .info
{
    height: 80px;
    margin-top: -80px;
    background: url(../../images/slideshow-info-pixel.png) repeat;
}

... with slideshow-info-pixel.png being a single pixel, 50% opacity, PNG 24.

I have so far tried z-index and the CSS must be compatible with IE6.

Answer 1

You must put the image in another element which is behind the element with a background image. The background image always renders rear most.

Answer 2

If I'm correct, what you're doing is you have the image inserted in the html then you have the transparent div rendered with css.

My suggestion here would be :

• Have the background image also rendered by css
• use the position property (it's actually essential)
• Use z-index to render one div over the other

CSS :

.yourImage
{
    position: relative;
    background: url(./yourImage.png);
    width: 800px;
    height: 600px;
    z-index: 20;
}

. transparent
{
    position: relative;
    background: url(./transparent.png) repeat;
    width: 800px;
    height: 600px;
    z-index: 30;
}

.yourText
{
    position: relative;
    z-index: 40;
}

If you really want to make sure your CSS is IE6 compatible, you should do another template for it. Seriously, making sure you comply with every IE6 quirks is a massive waste of time. The faster way is simply to do a simpler version of your page that only IE6 user would see.