Home/ Questions/Q 8983871
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T20:56:59+00:00

I have multiple backgrounds with a gradient, and its working for Firefox, Chrome and

  • 0

I have multiple backgrounds with a gradient, and its working for Firefox, Chrome and Safari, with certain media querys for mobile devices.

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, I’v been happy to use a single background image for all IE browsers, but so far the single background image wont work for IE.

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 Internet Explorer: style-ie.css

    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;  
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The problem is that you only give the gradient and multiple background to WebKit (using the old syntax) and Firefox (using the slightly newer syntax). There is no way that either IE or Opera can display the gradients or multiple backgrounds as you don’t supply their prefixes or the none prefixed version.

    IE10 implements gradients using the latest and final syntax, without prefixes. The latest Opera does too, and so does recent Firefox. IE10 doesn’t need your conditional comment code, as it will work the same way as the other browsers.

    The radial gradient should become something like:

    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),
    radial-gradient(circle closest-side at center, #c0deff, #509deb);

    More details on the syntax changes can be found on the IE blog [0] and the spec [1]

    [0] http://blogs.msdn.com/b/ie/archive/2012/06/25/unprefixed-css3-gradients-in-ie10.aspx ,
    [1] http://dev.w3.org/csswg/css3-images/#radial-gradients

    • 0