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

Question

[Никита Гусаков]

Подскажите пожалуйста, у меня есть большое фоновое изображение, около 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;
    }

Comments

[dllstar]

покажите уж ваш уникальный фон.

Answer 1

[Сергей Протько]

Вы можете попробовать использовать multiple background для этого, хотя лучше переделать само background изображение.

Answer 2

[Дмитрий Гукетлев]

Вы два раза background-image задали, поэтому и не работает

Comments

[dllstar]

@Yavanosta habrahabr.ru/post/139969

Answer 3

[fixmax1]

На сколько смог понять нужно 2 фона?!
Если да, то просто в body положите еще один div и фон задавать для body - градиент, а для div-а - "+ немного графики" (другое, полупрозрачное изображение).

Answer 4

[Михей Егоров]

И в дополнение: используйте progressive png (если конечно уже не используете).

Answer 5

[Masterme]

что не работает-то?

Answer 6

[Masterme]

Можно сделать стиль в самом конце странице, перед </body>