Question

I have couple of list items with specified height and width with a background which has borders with middle portions being transparent.
each li contains an image.

<ul id="reel">
    <li><img src="movie-image"></li>
    <li><img src="movie-image"></li>
    <li><img src="movie-image"></li>
</ul>

CSS:

#reel { width:960px; height:270px;}
#reel li { width:320px; height:327px; z-index:100; }
#reel li img { z-index:98; }

I want the background of the li to appear over the image. z-index, didn’t do the trick for me.
any suggestion?

Answer 1

Try a pseudo element. This presumes the image is 100px by 100px

li {               
    display:block;
    position:relative;
    height:100px;
    width:100px;
}

li:after {
    content:"";
    width:100px;
    height:100px;
    background-color:#000;
    display:inline-block;
    position:absolute;
    left:0;
    top:0;
    background: rgba(0, 0, 0, 0.6);
}