Question

I’m using a radial gradient as the background for a website. It works great on Safari, Chrome, and Firefox 3.5+, but Opera and Internet Explorer have problems. So, I made a background image to show on those browsers to give the same look. Right now, I’m detecting the browser and version server-side from the user-agent, and then including the correct CSS file. However, I feel like there must be a better way than having to maintain two seperate CSS files to do essentially the same thing (the only difference between the CSS files is html and body).

For good browsers:

html, body {
    width: 100%;
    height: 100%;
}
html {
    background-image: -ms-radial-gradient(center, circle farthest-side, #23395D 0%, #122037 60%, #0A131F 100%);
    background-image: -moz-radial-gradient(center, circle farthest-side, #23395D 0%, #122037 60%, #0A131F 100%);
    background-image: -o-radial-gradient(center, circle farthest-side, #23395D 0%, #122037 60%, #0A131F 100%);
    background-image: -webkit-gradient(radial, center center, 0, center center, 480, color-stop(0, #23395D), color-stop(0.6, #122037), color-stop(1, #0A131F));
    background-image: -webkit-radial-gradient(center, circle farthest-side, #23395D 0%, #122037 60%, #0A131F 100%);
    background-image: radial-gradient(center, circle farthest-side, #23395D 0%, #122037 60%, #0A131F 100%);
    -moz-box-shadow:inset 0 0 100px #080f1a;
    -webkit-box-shadow:inset 0 0 100px #080f1a;
    box-shadow:inset 0 0 100px #080f1a;
    background-attachment: fixed;
}
body {
    font-family: arial, sans-serif;
    font-size: 14px;
    color: #fff;
    line-height: 22px;
    text-decoration: none;
    background: url(/images/portal/checkered_bg.png) repeat;
}

For bad browsers:

html, body {
    width: 100%;
    height: 100%;
}
body {
    font-family: arial, sans-serif;
    font-size: 14px;
    color: #fff;
    line-height: 22px;
    text-decoration: none;
    background: #09101b url(/images/portal/big_bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/portal/big_bg.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/portal/big_bg.jpg', sizingMethod='scale')";
}

Answer 1

When you try to apply css that the browser doesn’t recognize, it just reports nothing, so if you do…

//ommiting document ready for brevity
if ($("html").css("background-image").indexOf("radial") < 0) {
  $("html").addClass("no-radial")
}

Then you can override the classes in CSS:

.no-radial body {
    font-family: arial, sans-serif;
    font-size: 14px;
    color: #fff;
    line-height: 22px;
    text-decoration: none;
    background: #09101b url(/images/portal/big_bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/portal/big_bg.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/portal/big_bg.jpg', sizingMethod='scale')";
}