title: background overwrites background-size
body: <p>I already know the solution to my problem but I wonder why this is happening. Why background overwrites background-size? Please don't write about cross browsing.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="icon"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.icon {
      height: 60px;
      width: 60px;
      background-size: 60px 60px;
      background: transparent url("icon.png") no-repeat 0 0;
  
  }
  </code></pre>
  
  <p><strong>DEMO</strong></p>
  
  <p><strong><a href="http://jsfiddle.net/K74sw/2/" rel="noreferrer">http://jsfiddle.net/K74sw/2/</a></strong></p>
  
  <p><strong>SOLUTION</strong></p>
  
  <p>Insert <code>background-size</code> instruction below <code>background</code></p>