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

Posted by Nat Ryall on Stack Overflow See other posts from Stack Overflow or by Nat Ryall
Published on 2010-05-26T12:13:18Z Indexed on 2010/05/26 12:21 UTC
Read the original article Hit count: 124

Filed under:
|
|
|

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.

© Stack Overflow or respective owner

Related posts about html

Related posts about css