Фоновые изображения + линейный градиент

Общее
1

Хочу сделать на фон картинку.
В общем идея такая:
Поставить картинку на фон, которая снизу начинает переходить в черный цвет. Т.е. если сайт получается “длинный”(картинка же не перекроет его весь), то сверху находится изображение, которое к концу начинает перетекать в однотонный чёрный фон, который тянется и тянется до конца.

body{
background-image:url(“wowback_2.jpg”);
background-size:cover;
background-repeat:no-repeat;
background-color:black;

}

Картинку вроде вставит, и фон сделал чёрным. Переход получился резкий. Можно ли его “смягчить” градиентом в CSS или тут через фотошоп как то?

2
  • Через фотошоп, фон сделать градиентом уходящий в черный.
  • Либо, сделать 2 блока, поднять z-index у второго и сделать градиент с плавным переходом (в теории должно работать)