title: Extend background gradient across body without background-attachment: fixed
body: <p>I want to have a background gradient, e.g. </p>
  
  <pre><code>background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(2, 126, 174, 0.9))
  </code></pre>
  
  <p>on the body of my document which extends across the entire height of the body - and scrolls with the body.</p>
  
  <p>Using</p>
  
  <pre><code>background-attachment: fixed;
  </code></pre>
  
  <p>I get the entire height (of the viewport), but it, well, stays fixed.</p>
  
  <pre><code>background-attachment: scroll;
  </code></pre>
  
  <p>gets me the scrolling, but then it just extends across the viewport height.</p>
  
  <p>Any way to get both?</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>As Boltclock pointed out, I do get the expected behavior with 'background-attachment: scroll' on a basic test page.</p>
  
  <p>With </p>
  
  <pre><code>&lt;body&gt;
     &lt;div id="stretch"&gt;Content&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>and </p>
  
  <pre><code>  body {
       background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(2, 126, 174, 0.9));
    }
  
    #stretch {
       height: 2000px;
    }
  </code></pre>
  
  <p>everything works fine: The gradient extends across the entire body (and the body is 2000px tall), and scrolls with the content.</p>
  
  <p>Then I add</p>
  
  <pre><code>  html, 
    body {
       height: 100%;
    }
  </code></pre>
  
  <p>This is something which the basic template the page is based on does. </p>
  
  <p>In order to get the body to expand again, I add</p>
  
  <pre><code>  height: auto;
  </code></pre>
  
  <p>and the body is back to 2000px height. </p>
  
  <p>However, the gradient remains at the HTML height - and repeats then.</p>
  
  <p>What am I missing here?</p>