title: List index background image - to the front?
body: <p>I am designing an online shop for client, and the product images need to be displayed in a frame, however this frame should be displayed over the image and not behind it (the image for the frame is a little squiggle thing and is not the same shape as the product image, hence why it needs to be on top - heres a link to a screen shot of the product page with the background images in the list - <a href="http://varoom.ie/pub_content/squiggle.png" rel="nofollow">product page</a></p>
  
  <p>(Those little pink images need to be sitting on top of the images) Heres the CSS</p>
  
  <pre><code>.product-grid{
   list-style: none;
   margin: 0;
   color: {{ settings.grid_text_colour }};
   }
  
     .product-grid li{
   padding: 25px 5px 5px 5px;
   width: 190px;
   float: left;
   margin: 0 15px 10px 0;
   position: relative;
   text-align: center;
  background: url({{ 'squiggle.png' | asset_url }}) no-repeat;
  }
  </code></pre>
  
  <p>is there anyway that the background image (squiggle.png) which is transparent can actually sit on top of the image which is shown in the list?</p>
  
  <p>any help greatly appreciated!</p>