title: How to apply linear gradients for the entire webpage when having multiple sections with 100vh?
body: <p>I'd like to have a linear gradient for my entire website using HTML/CSS - starting from one color (say red) at the beginning to another (say blue) at the end. When users request the page, they first see a blue background turning gradually to a red background as they scroll down. The website should be separated by sections, each of them filling the entire screen.  </p>
  
  <p>The problem is that when I separate the website with sections using 100vh, the linear gradient repeats itself for each section - instead of linearly changing over the sections. </p>
  
  <p>Here is the code I have used so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin: 0;
    padding: 0;
  }
  
  body {
    background-image: -ms-linear-gradient(bottom, #ffffff 0%, #202020 100%);
    background-image: -moz-linear-gradient(bottom, #ffffff 0%, #202020 100%);
    background-image: -o-linear-gradient(bottom, #ffffff 0%, #202020 100%);
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ffffff), color-stop(1, #202020));
    background-image: -webkit-linear-gradient(bottom, #ffffff 0%, #202020 100%);
    background-image: linear-gradient(to top, #ffffff 0%, #202020 100%);
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
  
  section {
    height: 100vh;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section&gt;
    &lt;div class=""&gt;first section&lt;/div&gt;
  &lt;/section&gt;
  &lt;section&gt;
    &lt;div class=""&gt;second section&lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any ideas on how to extend the linear gradient background over the sections? 
  Any help is appreciated!</p>