CSS: background vs background-image

[factotum]

На досуге было лень писать свое, скопи-пастил пару строк для своего ресурса:

Код: Выделить всё

background: linear-gradient(to bottom,  #444444 0%,#111111 100%);
background: linear-gradient(to bottom,  rgba(0,0,0,0.55) 0%,rgba(0,0,0,0.55) 19%,rgba(0,0,0,0.5) 41%,rgba(0,0,0,0.45) 50%,rgba(0,0,0,0.35) 61%,rgba(0,0,0,0.05) 93%,rgba(0,0,0,0.01) 100%);

6 ноудов с заливкой выше убили IE10, периодически подвешивали Chrome.

Почему:
Использование картинок/заливок в background негативно отражается на производительности. background с картинками разрывает браузеры.

Вывод: для картинок и заливок использовать исключительно background-color, background-image

Бонус:

Код: Выделить всё

background-image: url(http://site.com/pictures.jpg);

6 строк кода убили FF, IE10 неправильно выводил заливки.
Ошибка: url без кавычек.
Вывод с кавычками: background-image: url('http://site.com/pictures.jpg');