title: Use CSS to make background-image above background-color in a list
body: <p>This is the code</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li class="test"&gt;
           &lt;a href="#"&gt;
              &lt;h2&gt;Blah&lt;/h2&gt;
              &lt;p&gt;Blah Blah Blah&lt;/p&gt;
           &lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Basically, my list already has some styling, for example, I set the background-color for it.</p>
  
  <p>Now in the class "test", I also set a background-image.</p>
  
  <p>My question is I want to make the background-image stays above the background-color and I dont know how to achieve this. I tried with z-index but I think it is not applicable for background-image.</p>
  
  <p>Please take a look at the image</p>
  
  <p><img src="https://i179.photobucket.com/albums/w293/blackstorm_9x/Background.jpg" alt="Output"></p>
  
  <p>Edit: This is the CSS Code</p>
  
  <p>For example, this is the styling for my list</p>
  
  <pre><code>#sidebar ul li{  
      background:#ccf;
  }
  </code></pre>
  
  <p>And this is the styling for the class test</p>
  
  <pre><code>.test{
      background-image: url('img/big_tick.png');
      background-repeat:no-repeat;
      background-position: bottom right;
      -moz-background-size: 30%;
      -webkit-background-size: 30%;
      background-size: 30%;    
      margin-right: 30px;
  }
  </code></pre>