Как без js сделать постепенную загрузку большого изображения?

Подскажите пожалуйста, у меня есть большое фоновое изображение, около 1 мб.
Изображение фактически большой градиент + немного графики, которую невозможно выделить и расставить с помощью css на фоне градиента.
Сейчас это вот так, но не работает:

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