title: CSS attribute 'contain' not working
body: <p>I want to be able to display the entirety of an image within a <code>div</code>.</p>
  
  <p>I'm having difficulty displaying an image with the <code>background-size</code> property set to <code>contain</code> - it does not display the whole image, only the centre, at the full size of the source image.</p>
  
  <p><a href="http://jsfiddle.net/yohLs3es/" rel="nofollow"><strong>JSFiddle</strong></a></p>
  
  <p><strong>Code</strong>
  <div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#header {
      background: rgba(0, 0, 0, 0.8);
      color: #ccc;
      text-align: center;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 3;
      padding: 20px 0;
  }
  
  #header .logo {
      width: calc(100%/3);
      height: 75px;
      margin: 0 auto;
      background-size: contain;
      background: url(http://startupweekend.org/wp-content/blogs.dir/1/files/2013/04/CokeLogo1.png) no-repeat center center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="header"&gt;
    &lt;div class="logo"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>