How to make a gradual loading of a large image without js?

Question

css

Please tell me, I have a large background image, about 1 mb.
The image is actually a large gradient + some graphics that cannot be selected and placed using css on the background of the gradient.
Now it's like this, but it doesn't work:

body {
        background-image: -webkit-linear-gradient(180deg, #a0cbdd, #31b1e6);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#31b1e6', endColorstr='#a0cbdd',GradientType=1 );
        background-image: url(/images/snow-bg.png);
        background-size: cover;
    }

Answer 1

You can try using multiple background for this, although it's better to remake the background image itself.

Answer 2

You set background-image twice, that's why it doesn't work

Answer 3

As far as I could understand, you need 2 backgrounds ?!
If so, then just put another div in the body and set the background for the body - gradient, and for the div - "+ some graphics" (another, translucent image).

Answer 4

And in addition: use progressive png (unless of course you already use it).

Answer 5

what doesn't work?

Answer 6

You can make the style at the very end of the page, before </body>