Why does my gradient stop when viewing on mobile devices? - background

Question

I have used the following gradient background in CSS:
body {
margin:0px;
padding:0px;
border:0px;
font-family: Helvetica, Arial, Helvetica, sans-serif;
font-size: 12px;
color: white;
height:100%;
width:100%;
background: #f89623; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#150d03, endColorstr=#f89623); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#150d03), to(#f89623)); /* for webkit browsers */
background: -moz-linear-gradient(top, #150d03, #f89623); /* for firefox 3.6+ */
}
It works fine in IE, FF Chrome etc. on desktop computers, but the gradient stops when viewed on mobile devices.
The web address is: http://byoma.org/
Any advice would be appreciated. Thanks.

Answer 1

First of all, check out the browser compatibility:
But anyway, you should use the example below:
.grad {
background-color: #F07575; /* fallback color if gradients are not supported */
background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Chrome and Safari */
background-image: -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Fx (3.6 to 15) */
background-image: -ms-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For pre-releases of IE 10*/
background-image: -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Opera (11.1 to 12.0) */
background-image: linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be last */
}
Documentation: Mozilla doc
If it doesn't work, I use to resort to this web application: http://www.colorzilla.com/gradient-editor/