title: Unable to retain background-image
body: <p>I have a button which is actually a div posing as a button. On hover of the div i change the background to a gradient background. However the gradient is overlapping a background image that i have originally. How can i retain the original bg-image.</p>
  
  <p>I have attached a fiddle demo at the end of the question.</p>
  
  <pre><code> &lt;div class="cart-btn"&gt;&lt;a href=""&gt;CART&lt;/a&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.cart-btn{
      margin-left:20px;
      margin-top:2px;
      width:120px;
      height:30px;
      background-color:#0396C2;
      border-radius:3px;
      background-image: url(http://www.thorlabs.com/images/newhp/shopping_cart2.png) ;
          background-repeat:no-repeat;
  }
  .cart-btn:hover{
      border: 1px solid #005387;
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0396C2),   color-stop(100%,rgba(0,76,158,1))); /* Chrome,Safari4+ */       
      margin-top:1px;
  }
  .cart-btn a{
          color: #FFFFFF;
          display: block;
          line-height: 34px;
          outline: medium none;
          text-align: center;
          text-decoration: none;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/marsone/rbqTb/" rel="nofollow">FIDDLE DEMO</a></p>