background images and a gradient in css3

[conor909]

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

body{
    font:14px 'questrialregular', Arial, Helvetica, sans-serif;
    margin:0;
    width:100%;
    color:#797979;

    background-image: 
    url(../img/bknd_img1.png),
    url(../img/bknd_img2.png),
    url(../img/bknd_img3.png),
    url(../img/bknd_img4.png),
    url(../img/bknd_img5), -webkit-gradient(radial, 50% 20%, 0, center center, 500, from(#c0deff), to(#509deb));

    background-image: 
    url(../img/bknd_img1.png),
    url(../img/bknd_img2.png),
    url(../img/bknd_img3.png),
    url(../img/bknd_img4.png),
    url(../img/bknd_img5.png), -moz-radial-gradient(center center, circle contain, #c0deff, #509deb);

    background-attachment:fixed;
    background-position:top right, top left, center bottom,  bottom right,  left bottom;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-color:#509deb;
    display:block;}

CSS for IE

font:14px 'questrialregular', Arial, Helvetica, sans-serif;
    margin:0;
    width:100%;
    color:#797979;

    background-image: url('img/bknd_full_img.jpg');
    background-attachment:fixed;
    background-position:center top;
    background-repeat: no-repeat;
    background-color:#fff;
    display:block;  
}

[rtrethewey]

IE10 will support CSS gradients, but prior versions are limited to the Microsoft (linear) gradient filter.

[webdesignct]

IE10 will support CSS gradients, but prior versions are limited to the Microsoft (linear) gradient filter.

Wonderful IE. Enough to pull one's hair out.

[dstorey]

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.

You can see some info on the Gradient syntax change on my blog: http://generatedcontent.org/post/379...updateyourcss3