How to bring background image to front?

css

Solution

You can use a pseudo element (or another absolutely positioned element) to achieve this.

JSFiddle Demo

HTML

<ul>
    <li><img src="http://www.mytinyphone.com/uploads/users/fairytail123/574523.jpg"/>
    </li>
</ul>

CSS

li { 
    font-size:25px; 
    position: relative;
    display: inline-block;
}

li:before {
    position: absolute;
    content:"";
    width:100%;
    height:100%;
    background:url(http://www.chicagotribune.com/hive/images/video/play_icon_carousel.png);
    background-repeat:no-repeat; 
    background-position: center;
    background-size: contain;

}

Problem

I'm trying to make a list of "fake video" which is actually an image with a play icon on it. My idea is set the play icon as background, then bring it to front of the image using z-index, however, no matter what I do the, icon still stay behind any content within the tag. This is my code: HTML: ``` <ul> <li><img src="http://www.mytinyphone.com/uploads/users/fairytail123/574523.jpg"/></li> <li>test</li> <li>test</li> </ul> ``` CSS: ``` li { font-size:25px; background:url(http://www.chicagotribune.com/hive/images/video/play_icon_carousel.png); background-repeat:no-repeat; z-index:99999; } ``` Here is a jsfiddle: http://jsfiddle.net/ZNeFu/

Original source