Question

I have this CSS generated from this URL:
http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html

/* IE10 Consumer Preview */ 
background-image: -ms-radial-gradient(center bottom, circle closest-corner, #FFFFFF 0%, #BCD2E3 100%);

/* Mozilla Firefox */ 
background-image: -moz-radial-gradient(center bottom, circle closest-corner, #FFFFFF 0%, #BCD2E3 100%);

/* Opera */ 
background-image: -o-radial-gradient(center bottom, circle closest-corner, #FFFFFF 0%, #BCD2E3 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(radial, center bottom, 0, center bottom, 487, color-stop(0, #FFFFFF), color-stop(1, #BCD2E3));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-radial-gradient(center bottom, circle closest-corner, #FFFFFF 0%, #BCD2E3 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: radial-gradient(circle closest-corner at center bottom, #FFFFFF 0%, #BCD2E3 100%);

How can I make this where it degrades well to older browsers and uses the image instead of the gradients?

Here is my current CSS with a background image, also, my image is currently 1600X144 and I’d like the center of the gradient centered accordingly.:

.navbar .navbar-inner {
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 10px rgba(239, 24, 3, 0.1);
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 10px rgba(239, 24, 3, 0.1);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 10px rgba(239, 24, 3, 0.1);
    background: url(../images/bgHeader2.png);
}

Answer 1

The generated code already degrades for older browsers: they’ll use the background-image: url(bgHeader2.png); property value and disregard the gradient properties because they can’t parse them (this is why the ordering of the properties is important).

I can’t see anything wrong besides the fact the generated code is very verbose.