title: CSS background: transparent url() not displaying img
body: <p>I'd like to replace the WooCommerce "Add to cart" button with a PNG image.</p>
  
  <p>I'm using the following CSS in my child theme to do this:</p>
  
  <pre><code>.woocommerce .single_add_to_cart_button, .woocommerce ul.products li.product .button {
    background: transparent url('http://www.tempertemper.com.au/test/wp-content/themes/temper/images/buy.png') no-repeat !important;
    opacity: 0 !important;
    width: 109px;
    height: 46px;
  }
  </code></pre>
  
  <p>I set opacity to 0 to get rid of the text "Add to Cart".</p>
  
  <p>However, this only produces an element with a transparent background, and no background image:<a href="https://i.stack.imgur.com/b5MwK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/b5MwK.png" alt="enter image description here"></a></p>
  
  <p>The button is directly to the right of the product quantity field: <a href="http://www.tempertemper.com.au/test/product/dark-chocolate-coated-brazils/" rel="nofollow noreferrer">example page</a>.</p>
  
  <p>Why isn't the background image showing? Thanks.</p>