CSS repeat background-image but no-repeat for linear-gradient

Question

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.

Is there a way I can use CSS to repeat the PNG overlay, but not the linear gradient?

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;
}

Answer 1

You can comma separate the background properties for each background

BODY {
background-color:#dedede;
background-image: url(icons/noise_overlay.png)
                , linear-gradient(
                      #c0bbbb
                    , #efefef 25em
                    , #efefef calc(100% - 15em)
                    , #dedede
                  );
background-repeat:repeat, no-repeat;
}