Gradiente lineare e immagine url per browser mobile?

Question

Vorrei avere un'immagine come sfondo e anche un gradiente lineare CSS:

background-image: url("/site/grigliatrasparente.png"), linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%); 

ho dont'have problemi con browser desktop (Firefox 44.x; IE 10, Chrome, Safari), ma doesn' lavoro con browser mobile (ho provato con il mio iphone 5, (9.x) con safari, app firefox, app chrome).

Io uso questo:

background-image: url("/site/grigliatrasparente.png"), -moz-linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%); 
background-image: url("/site/grigliatrasparente.png"), -webkit-linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%); 
background-image: url("/site/grigliatrasparente.png"), -o-linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%); 
background-image: url("/site/grigliatrasparente.png"), -ms-linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%); 
background-image: url("/site/grigliatrasparente.png"), -webkit-gradient(linear, left bottom, right bottom, color-stop(0%,#404040), color-stop(2%,#dfbb80),color-stop(98%,#dfbb80),color-stop(100%,#404040)); 
background-image: url("/site/grigliatrasparente.png"), linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%); 
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#404040, endColorstr=#dfbb80); 
background-color: #dfbb80; 

Qual è il problema?

Grazie mille e scusa per il mio inglese :)

Answer 1

Nei primi giorni di molteplici sfondi di CSS3, il problema era che il gradiente prende il posto dello sfondo IMG, ma le cose vengono risolti e al mozilla-developer si può trova un esempio come la tua idea che funziona bene, anche mobile.
Il tuo css ha un bell'aspetto, sebbene tu possa eseguirlo tramite autoprefixr per ottenere i prefissi aggiornati.
E prima di pensare alla possibilità che forse uno dei prefissi disturba il display, FIRST controlla con il telefono l'esempio funzionante (e ovviamente il css) e imposta la ripetizione dello sfondo e la posizione dello sfondo per l'immagine di sfondo.

Answer 2

Controllare sotto il collegamento jsfiddle. Sul mio esempio, senza prefisso lineare gradiente è stato corretto all'ultima syntaxis: (in questo caso utilizzando 'a ...' per la direzione)

background-image: url(http://placehold.it/350x150), linear-gradient(to right, #404040 0%, #dfbb80 2%, #dfbb80 98%, #404040 100%); 

https://jsfiddle.net/3u2Lhx6k/

info più dettagliate: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient.