title: one single non-scrollable background image for the entire page content
body: <p>I need one single image (<code>01.jpg</code>) in the background of all page content, and this image should not be scrollable, while all content should be scrollable over the background.  </p>
  
  <p>Here is my try, but something is wrong, it doesn't work. Scrolling down a white area appears as the background (<code>00.jpg</code>), probably because <code>wrap</code> div is higher than body.</p>
  
  <p>What is the best practice here ?</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="wrap"&gt;
  ...
  &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>html{
      background-image:url(backs/00.jpg);
      height:100%;
  }
  body{
      max-width:1920px;
      height:100%;
      background-image: url("imgtop/01.jpg");
      background-size: 100% auto;
      background-repeat: no-repeat;
      background-position:center;
      background-attachment: fixed;
  }
  </code></pre>