title: CSS3 background-size: contain;
body: <p>I'm a bit stuck with some of the new CSS3 Background commands an was wondering if anyone could advise?</p>
  
  <p>I'm trying to create a  that has a background image that scales dynamically to the Screen/Browser Size.</p>
  
  <p>here's is an example of the effect I want to achieve, this is running on the &lt; body > tag <a href="http://www.css3.info/demos/background-size-contain.html" rel="nofollow">http://www.css3.info/demos/background-size-contain.html</a></p>
  
  <p>The problem I am having is that the &lt; body > tag needs no height or width defining, but a &lt; div > does, here is my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt; 
  &lt;html&gt; 
  &lt;head&gt; 
  &lt;title&gt;background-size: contain;&lt;/title&gt; 
  &lt;style type="text/css"&gt; 
  
  #please_expand {
  background-image: url(images/betweengrassandsky.png);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #EEE;
  background-size: contain;
  }
  &lt;/style&gt;
  
  &lt;body&gt;
  &lt;div id="please_expand"&gt;
      &lt;h1&gt;Example J - background-size: contain;&lt;/h1&gt;
  &lt;/div&gt;
  &lt;/body&gt; 
  &lt;/html&gt; 
  </code></pre>