Почему не работает градиент?
Градиент - это картинка. Задается свойством background-image;
Если вы задаете несколько background-image - будет использовано последнее объявление (понимаемое браузером), и не важно, что картинка не загрузилась.
Для решения вашей задачи можно использовать множественные фоны
background-image: url('...'), linear-gradient(...);

Но в этом случае нужно иметь ввиду, что IE8 ничего не знает про множественные фоны.
Если нужна поддержка и IE8, то у вас единственный выход - добавить внешнюю обертку и задавать градиент ей.
При таких трудностях, используйте gradien generator. Сократит Вам время и силы)
www.colorzilla.com/gradient-editor