I have multiple backgrounds with a gradient, and its working for Firefox, Chrome and Safari, with certain media querys for different size screens.
As usual the problem is Internet Explorer. I used to have a conditional stylesheet for IE where I just loaded a single background image, but as far as I know, IE10 wont support < !--If IE--> in my CSS.
Ideally I would like to get the css3 gradient and separate background images working on all browsers but I'v been happy to just use a single background image for all IE browsers until IE10 stopped using conditional style sheets.
I think I need to combine the IE with the moz and webkit background css on the body. But so far I cant get anything to work. Any help would be much appreciated..
CSS in main style.css
font:14px 'questrialregular', Arial, Helvetica, sans-serif;
url(../img/bknd_img5), -webkit-gradient(radial, 50% 20%, 0, center center, 500, from(#c0deff), to(#509deb));
url(../img/bknd_img5.png), -moz-radial-gradient(center center, circle contain, #c0deff, #509deb);
background-position:top right, top left, center bottom, bottom right, left bottom;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
For IE10 you can just use regular CSS gradients, without prefix. You will need to update your syntax to the new version, but you should do that for other browsers too. This will also make it work for Opera, as you don't include the -o- prefix in your CSS either. If you want to keep the old syntax, you should add a -ms- and a -o- version for IE and Opera respectively.