title: LI background image shows behind li > img
body: <p>So, I have this html structure:</p>
  
  <pre><code>&lt;li class="block1"&gt;
       &lt;a title="Block 1 Title" href="get/wzTZKKrI1kQ"&gt;
            &lt;img height="150" width="200" alt="Block 1 Title" src="http://lorempixel.com/output/city-h-c-170-230-2.jpg"&gt;
            &lt;span&gt;Block 1 Title&lt;/span&gt;
       &lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>And this .css code:</p>
  
  <pre><code>#home #results li{
    float: left;
    list-style: none;
    margin: 0 10px 10px 0;
    display: inline-block;
    height: 200px;
    width: 200px;
    padding: 10px;
    overflow:hidden;
    text-align: left;
    /*background: #E1D4C0;*/
  }
  #home #results li.block1{ 
    background: #E1D4C0 url("../imgs/bg/lp-bg.png") no-repeat top center;
    z-index: 1
  }
  </code></pre>
  
  <p>But for some reason the <strong>#home #results li.block1</strong> background img shows behind html img/<strong>#home #results li img</strong> / <code>#home #results li.block1</code>'s background image shows behind <code>&lt;li&gt;&lt;a&gt;&lt;img&gt;</code></p>
  
  <p>Why is that happening? I have tried z-index and no success</p>
  
  <p>Edit:
  screenshot: <a href="http://awesomescreenshot.com/068s3wo8e" rel="nofollow">http://awesomescreenshot.com/068s3wo8e</a></p>
  
  <p>I've managed to fix it, check out my answer below.</p>