Множественные фоны на примере затухающего фона с градиентом и картинкой

Суть задачи – в psd-макете был фон с картинкой и градиентом, который вверху четкий и контрастный, а к нижней части страницы переходит в один цвет и картинка затухает.

Делать такой фон картинкой не сильно интересно, потому что на длинной странице этот фон затухнет еще до половины страницы, а потом надо будет задать просто одноцветный фон, а на маленькой странице затухание мы почти не увидим. Поэтому, долго не думая, этот фон был создан при помощи css multiple backgrounds. Их суть в том, что для одного элемента можно задать несколько фоновых рисунков. Они будут располагаться поверх друг друга: фон, заданный первым – в самом верху, последний фон – в самом низу.

Пример короткой записи множественных фонов:

.myclass {
  background: background1, background 2, ..., backgroundN;
}

Идея такая:

• самый верхний слой – это градиент от прозрачного к светлому фону, который будет создавать эффект затухания картинки, этот слой будет в самом верху;
• второй слой – это картинка размноженная по всей странице;
• первый слой – это градиент от светлого к темному цвету, этот слой будет в самом низу.

При этом, надо не забывать, что фон, заданный первым будет в самом верху, последний фон окажется в самом низу.

Получаем такой CSS на рабочем проекте:

body {
  background-image: linear-gradient(to top, #c0dce3, transparent),
    url(https://denis-creative.com/wp-content/uploads/2018/05/bg-stars.png),
    linear-gradient(to top, #c0dce3, #02728e);
  background-repeat: no-repeat, repeat, no-repeat;
  background-position: 0 0, 0 0, 0 0;
}

Рабочий пример множественных фонов:

See the Pen multiple-background css by Denis (@deniscreative) on CodePen.0