title: Can I fade a background image into the background color?
body: <p>I want a website to have a background color, and a background image that scales with the width, and keeps the aspect ratio. So far pretty easy:</p>
  
  <pre><code>body {
      background-attachment:fixed;
      background-color:#ff9999;
      background-image:url(https://i.redd.it/x7hdjnmupu901.jpg); // random image from google search
      background-position:top center;
      background-repeat:no-repeat;
      background-size:100% auto;
  }
  </code></pre>
  
  <p>Now, is it possible with CSS to have the background image to the bottom side 'fade into' the background color? As in, have the bottom 50 pixels of the background image slowly lose alpha value, so it smoothly goes into the background color?</p>
  
  <p>Here is a JSFiddle, if someone wants to see this / play around with it: <a href="http://jsfiddle.net/wkz1t2b3/5/" rel="nofollow noreferrer">http://jsfiddle.net/wkz1t2b3/5/</a></p>