title: Background-size: cover not scaling image in div
body: <p>I have four equally sized div's set up like this:</p>
  
  <pre><code>&lt;div id="top-left"&gt;&lt;/div&gt;
  &lt;div id="top-right"&gt;&lt;/div&gt;
  &lt;div id="bottom-left"&gt;&lt;/div&gt;
  &lt;div id="bottom-right"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Each is 50% of the page's width and positioned absolutely. Like this, for example:</p>
  
  <pre><code>#top-right {
  position: absolute;
  top: 0px;
  left: 50%;
  width: 50%;
  height: 50%;
  }
  </code></pre>
  
  <p>The issue is when I try to scale a (large) background image via the CSS3 cover. This is the background image css I have so far:</p>
  
  <pre><code>background: #000 url('DSC01992.jpg') center center fixed no-repeat;
  background-size: cover;
  -moz-background-size: cover;
  -o-(etc.)
  </code></pre>
  
  <p>Here is a live example: <a href="http://jsfiddle.net/TqQv7/">http://jsfiddle.net/TqQv7/</a></p>
  
  <p>If you open the placeholder image here: <a href="http://placekitten.com/2000/1000">http://placekitten.com/2000/1000</a>  you will see that the image is not being scaled correctly.</p>
  
  <p>Am I missing something?</p>