title: Prevent background disappearing
body: <p>So I've got a body with a CSS gradient background. Then I've got an absolute positioned div nested just within that with a background overlay. In turn, the content wrapper div is then nested within this. I want background div to be fixed and the web page to scroll over the top. The problem is, when the page scrolls the background overlay div kind of disappears like a roller blind...</p>
  
  <p>Here's my fiddle to demonstrate the issue... <a href="http://jsfiddle.net/WPk6h/" rel="nofollow">http://jsfiddle.net/WPk6h/</a> (try scrolling the result pane to see the effect I mean).</p>
  
  <p>HTML....</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="bgwrapper"&gt;
          &lt;div id="wrapper"&gt;
              Content...
          &lt;/div&gt;
      &lt;/div&gt;    
  &lt;/body&gt;
  </code></pre>
  
  <p>and CSS...</p>
  
  <pre><code>body {
      background-color:#fcf
  }
  #bgwrapper{
      position:absolute;
      top:0;bottom:0;left:0;right:0;width:100%;height:100%;
      background: transparent url(http://www.freesmileys.org/smileys/big/big-smiley-001.gif) no-repeat right bottom;
      background-size:cover;
      background-attachment:fixed;    
  }
  #wrapper {
      width:300px;
      margin: 0 auto;
  }
  </code></pre>
  
  <p>Any ideas how to prevent this so that the background overlay remains visible at all times?</p>
  
  <p>note... I've not tested it heavily in all browsers yet - the issue is in the first browser I've been using, Chrome so I haven't got round to testing in others yet.</p>
  
  <p>EDIT...</p>
  
  <p>People are wondering why I don't just apply the background image to the HTML or BODY tags - well, there is a clash between CSS gradients and background images - you cannot have them both in the same element, as can be seen with the two examples below. This is why I'm using an additional background wrapper div to create the effect of an 5% alpha image overlaying the gradient bg.</p>
  
  <p><a href="http://jsfiddle.net/tqbtm/" rel="nofollow">http://jsfiddle.net/tqbtm/</a> (attempting to add gradient <em>and</em> bg image to body tag)</p>
  
  <p><a href="http://jsfiddle.net/ca5wa/" rel="nofollow">http://jsfiddle.net/ca5wa/</a> (adding bg image to bg wrapper div <em>over</em> the body gradient)</p>