title: How to bring background image to front?
body: <p>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.</p>
  
  <p>This is my code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;img src="http://www.mytinyphone.com/uploads/users/fairytail123/574523.jpg"/&gt;&lt;/li&gt;
      &lt;li&gt;test&lt;/li&gt;
      &lt;li&gt;test&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>li { 
      font-size:25px; 
      background:url(http://www.chicagotribune.com/hive/images/video/play_icon_carousel.png);
      background-repeat:no-repeat;
      z-index:99999;
  }
  </code></pre>
  
  <p>Here is a jsfiddle:
  <a href="http://jsfiddle.net/ZNeFu/" rel="nofollow">http://jsfiddle.net/ZNeFu/</a></p>