title: CSS repeat background-image but no-repeat for linear-gradient
body: <p>I have a cool noise overlay PNG that I'd like to use on my website.
  However, the background image is a linear gradient. 
  If I allow background-repeat, it overlays the PNG correctly, but if the page content is shorter than the screen size, it repeats the gradient as well, which looks horrible.</p>
  
  <p>Is there a way I can use CSS to repeat the PNG overlay, but <strong>not</strong> the linear gradient?</p>
  
  <pre><code>BODY {
  background-color:#dedede;
  background-image: url(icons/noise_overlay.png)
                  , linear-gradient(
                        #c0bbbb
                      , #efefef 25em
                      , #efefef calc(100% - 15em)
                      , #dedede
                    );
  background-repeat:no-repeat;
  }
  </code></pre>