title: Fixed gradient background with css
body: <p>I would like for my page to have a gradient background flowing from top to bottom. I want the background to act like a fixed image in that the gradient stretches from the top of the current browser viewport to the bottom and looks the same as you scroll up and down the page. In other words, it does not repeat when you scroll. It stays fixed in place.</p>
  
  <p>So what I want is this:</p>
  
  <p><img src="https://i.stack.imgur.com/vm8S1.png" alt="enter image description here"></p>
  
  <p>and after scrolling to the bottom you see this
  <img src="https://i.stack.imgur.com/SlVs1.png" alt="enter image description here"></p>
  
  <p>Notice that the gradient looks exactly the same on the bottom of the page as it does on the top. It goes from full yellow to full red.</p>
  
  <p>The best I'm actually able to do is having the gradient span the entire content of the page instead of just the viewable portion, like this:</p>
  
  <p><img src="https://i.stack.imgur.com/UMcbg.png" alt="enter image description here"></p>
  
  <p>and the bottom looks like this:
  <img src="https://i.stack.imgur.com/L1anQ.png" alt="enter image description here"></p>
  
  <p>Notice here that the gradient spans the entire length of the content, not just what is currently visible. So at the top of the page you see mostly yellow and at the bottom of the page you see mostly red.</p>
  
  <p>I suppose I could solve this using an image stretched in the y plane and repeated in the x plane but I'd rather not do this since if possible since stretching the image might leading to a blocky, non granular looking gradient. Can this be done dynamically with just CSS?</p>