title: Multiple backgrounds with different background-size
body: <p>I am trying to create a page background with an overlay using <a href="/questions/tagged/css3" class="post-tag" title="show questions tagged &#39;css3&#39;" rel="tag">css3</a>'s multiple background support;</p>
  
  <pre><code>html, body {
    background: url('https://github.com/jaysalvat/vegas/raw/master/overlays/01.png') repeat,
                url('http://farm8.staticflickr.com/7260/7502004958_595bf03fbf_z.jpg') top left no-repeat;
    background-size: cover;
  }​
  </code></pre>
  
  <p>I want the photo background image to "cover" the page and the overlay to be small (3*3px) repeating over the hole page.</p>
  
  <p>The above example gives me <a href="http://jsfiddle.net/tpmD4/" rel="noreferrer">http://jsfiddle.net/tpmD4/</a> (also the overlay covering the page).</p>
  
  <p>How can I fix that?</p>
  
  <p>When I try to specify the <a href="/questions/tagged/background-size" class="post-tag" title="show questions tagged &#39;background-size&#39;" rel="tag">background-size</a> for both of the images (<code>background-size: 3px 3px, cover;</code>); then the image background doesn't cover, but the overlay works.</p>