Почему не работает градиент?

Question

[Дмитрий]

Здравствуйте. В блоке есть фоновая картинка. На случай если картинка не загрузилась под ней должен быть градиент. Но не работает.

Так работает:

background-repeat: no-repeat;
	background-position: center top;
	-webkit-background-size: cover;
	background-size: cover;
	
	background: #ad633c url(../img/bg-models.jpg);

А так нет:

background-image:  url(../im1g/bg-models.jpg);//путь к картинке неверный чтобы отобразился фон
	background-repeat: no-repeat;
	background-position: center top;
	-webkit-background-size: cover;
	background-size: cover;
	
	background-color: #ad633c;
	background-color: -moz-linear-gradient(top,  #ad633c 0%, #1e110a 100%);
	background-color: -webkit-linear-gradient(top,  #ad633c 0%,#1e110a 100%);
	background-color: linear-gradient(to bottom,  #ad633c 0%,#1e110a 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ad633c', endColorstr='#1e110a',GradientType=0 );

Answer 1

[Сергей delphinpro]

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

background-image: url('...'), linear-gradient(...);

Но в этом случае нужно иметь ввиду, что IE8 ничего не знает про множественные фоны.
Если нужна поддержка и IE8, то у вас единственный выход - добавить внешнюю обертку и задавать градиент ей.

Comments

[Дмитрий]

Спасибо

[joenerv]

Спасибо. сработало)

Answer 2

[Константин Давыдов]

При таких трудностях, используйте gradien generator. Сократит Вам время и силы)

www.colorzilla.com/gradient-editor