title: 100% width & height background-image not working
body: <p>I want the background-image to cover the whole available space without getting squashed.<br>
  Actually I thought that's whats <code>background-size</code> is for, but I guess I am doing something wrong because its not working, please help me.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="myDiv"&gt;
      &lt;p class="paragraph"&gt;Lorem Ipsum&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>body {
      background-color: black;
  }
  
  .myDiv {
      color: white;
      background: url('http://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png') no-repeat center center fixed; 
      background-size: cover;
  }
  </code></pre>
  
  <p><strong>FIDDLE</strong><br>
  <a href="http://jsfiddle.net/V7KSb/" rel="nofollow">http://jsfiddle.net/V7KSb/</a></p>