Setting overlay image over an image

Question

I have a semi-transparent image which I want to overlay over an image. I'm trying following HTML and CSS for that, but I cant get the background over the image, it always remain behind the image.

In the following code, I am trying to set the background of .box (red color) over the image in the li.

HTML:

<div class="box">
    <div class="x">
    <ul>
        <li>
            <img src="http://farm9.staticflickr.com/8341/8283881151_aa0735d1fc.jpg" />            
        </li>
    </ul>
    </div>
</div>

CSS:

.box{
    background: red;
    position: relative;
    z-index: 2
}


li{
    position: relative;
    z-index: 1;
}

Demo

Answer 1

You need to set the box on the same layer as the image.

Here is an example: Fiddle

HTML:

 <div id="container">
     <div id="box"></div>
     <img src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Triple-Spiral-4turns_green_transparent.png"
 width=200 id="overlay"></div> 
</div>​

CSS:

#container {
    position: relative;
}

#box {
    position: relative;
    display: block;
    width: 200px;
    height: 200px;
    background: red;
    z-index: 1;        
}

#overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}​

Answer 2

The problem is that your image is within the box. Thus, raising the box's z-index will not put it on top of the image, because everything inside the box comes with it.

To fix this, put the image in a separate div that is outside the box, then make you will be able to put the box over top of it.

Update: this defines two divs. .box will be semitransparent on top of .x.

.box{
    background: red;
    opacity: 0.4;
    position: absolute;
    height: 500px;
    width: 500px;
    z-index: 2
}

.x {
    position: absolute;
    z-index: 1;
}

Jsfiddle example.