title: background-image: fixed overstretching image
body: <p>On my portfolio, I am trying to implement a full-width fixed (not scrolling, not parallax...fixed) background image. This image will serve as the background for a foreground image.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;header&gt;
      &lt;img src="assets/img/blahblah1.png"&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>(header has the background image applied and img is the foreground image)</p>
  
  <p>CSS:</p>
  
  <pre><code>header {
     background-image: url(../assets/img/blahblah2.jpg);
     background-attachment: fixed;
     background-position: 0 0;
     min-height: 15.625em;
     padding: 4em 0 12em;
     background-repeat: no-repeat;
     width: 100%;
     -webkit-background-size: cover;
     -ms-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
     padding: 0;
  }
  </code></pre>
  
  <p>However, the problem is that <code>background-attachment: fixed</code> stretches the image much more than the default.</p>
  
  <p>Please see these two screenshots:  and one without.</p>
  
  <p><a href="https://www.dropbox.com/s/03uoj4z537ein3g/Screen%20Shot%202014-10-19%20at%2010.09.19%20PM.png?dl=0" rel="nofollow">Screenshot</a> with <code>background-attachment: fixed</code></p>
  
  <p><a href="https://www.dropbox.com/s/ydmtdyerda5v9fx/Screen%20Shot%202014-10-19%20at%2010.21.02%20PM.png?dl=0" rel="nofollow">Screenshot</a> with default background-image</p>
  
  <p>What am I missing? Is there a workaround? I definitely want the background image to be fixed.</p>