title: Why does background-attachment: fixed make background-size:cover resize to the window proportions?
body: <p>If you want a header image that resizes to cover the entirety of the header but also want the background-attachment to be fixed the background image will no longer cover the containing div but will attempt to cover the entirety of the window.</p>
  
  <p>Here'a  fiddle that shows the problem. Just toggle the commend of line 13 on the CSS. When you change to 
  <a href="http://jsfiddle.net/TqQv7/155/">http://jsfiddle.net/TqQv7/155/</a></p>
  
  <pre><code>#top-left {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 50%;
      height: 50%;
      background: #000 url('http://placekitten.com/2000/1000') no-repeat;
      -moz-background-size: cover;
      background-size: cover;
      -webkit-background-size: cover;
      -o-background-size: cover;
      background-color: transparent;
      /* background-attachment: fixed; */
  }
  </code></pre>
  
  <p>background-attachment is 'scroll' by default. So with 'fixed' commented out the cat picture resize to the shape of the top left box without a problem but with 'fixed' the cat background stays fixed to the page but the cat picture size then "covers" the entire page.</p>
  
  <p>Ideally I want to recreate the header here: <a href="http://startbootstrap.com/templates/stylish-portfolio/index.html">http://startbootstrap.com/templates/stylish-portfolio/index.html</a></p>
  
  <p>But with the header set to 50% of the page height. It works within this example because the header is full page.</p>
  
  <p>This seems to be compatible with the standard as all modern browsers appear to do the same but I can't understand why it behaves this way?</p>