title: How to: background-size: 100% auto, background-attachment: scroll
body: <p>Firefox has a curious bug relating to background-attachment and background-size.  I call it a bug, I suspect it isn't, but this renders the way I think it should in the other major browsers (emphasis on I think).  The desired effect is to size a vertically repeating background to 100% width while maintaining image proportion.</p>
  
  <p>Here's my original CSS, in this version, the background won't render at all for firefox (even with firefox specific background tags).</p>
  
  <pre><code>body {
      background: #000 url('../background.jpg') left top repeat-y;
      background-attachment: scroll;
      background-size: 100% auto;
  }
  </code></pre>
  
  <p>Changing <code>background-attachment: scroll;</code> to <code>background-attachment: fixed;</code> causes the background to render, but the "floating background" behavior is not desired.</p>
  
  <p><strong>[UPDATE]</strong></p>
  
  <p>Removing background position causes the image to render correctly again.</p>
  
  <p>e.g.</p>
  
  <pre><code>body {
      background: #000 url('../background.jpg') repeat-y;
      background-size: 100% auto;
  }
  </code></pre>
  
  <p>This is actually a problematic fix because my position values were actually 'left 113px'. I can fix this by applying the background to a wrapping div below the site header instead of the body element, but the fact remains that Firefox has trouble rendering background images with background-size: 100% auto; when position values are used and attachment is scroll.</p>
  
  <p><strong>[UPDATE 2]</strong></p>
  
  <p>I realize the bug only shows up when an additional piece of CSS is present.  That's not to say the additional piece of CSS was at fault (it isn't), it's to say that this Firefox specific rendering bug is somehow caused by it.</p>
  
  <p>The additional CSS (used for creating layouts with flexible 100% height)</p>
  
  <pre><code>html {  width: 100%;    height: 100%;   position: absolute; }
  </code></pre>
  
  <p>And the complete body CSS to go with to replicate the bug</p>
  
  <pre><code>body  {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      margin: 0;
      background: #000 url('image.jpg') top left repeat-y;
      background-size: 100% auto;
  }
  </code></pre>
  
  <p><strong>[SOLUTION]</strong>
  I solved my problem by creating an additional wrapped div immediately within the body and attaching the background there without specifying position properties.</p>
  
  <pre><code>#wrapper {
      position: absolute;
      min-height: 100%;
      width: 100%;
      background: #000 url('image.jpg') repeat-y;
      background-size: 100% auto;
  }
  </code></pre>
  
  <p>But because I now have an additional wrapper anyway, I can go ahead and remove the position, height, and width attributes from <code>html</code>, rendering the bug moot and allowing me to set the position of the background as well. </p>