Cross Browser Background rule order

Hey guys,

I have all my rules to make each browser give a nice backgound but can’t seem to get the order of them right. As is, I get CSS gradients in Chrome, FF, etc, IE9 gets SVG but IE 7 and 8 just show a plain colour. I would like 7+8 to use the png image version.

IE6 has been relegated to a plain IE6 universal set of styles so not worried about that.

Any ideas how to get IE 7 and 8 to use the PNG version?

  background: rgb(58, 77, 160) image-url('bg-body.png') repeat-x left top; /*Graphic*/
  background: rgb(58, 77, 160) image-url('bg-body.svg') repeat-x left top; /*SVG*/
  background: #3A4DA0 -webkit-linear-gradient(top, rgb(18, 22, 43) 0, rgb(58, 77, 160) 500px) no-repeat; /*CSS Gradient*/
  background: #3A4DA0 -moz-linear-gradient(top, rgb(18, 22, 43) 0, rgb(58, 77, 160) 500px) no-repeat;
  background: #3A4DA0 -ms-linear-gradient(top, rgb(18, 22, 43) 0, rgb(58, 77, 160) 500px) no-repeat;
  background: #3A4DA0 -o-linear-gradient(top, rgb(18, 22, 43) 0, rgb(58, 77, 160) 500px) no-repeat;
  background: #3A4DA0 linear-gradient(top, rgb(18, 22, 43) 0, rgb(58, 77, 160) 500px) no-repeat;

Kind regards,
Neil

instead of

[COLOR="#FF0000"]image-url[/COLOR]('bg-body.png')

it should just be

[COLOR="#FF0000"]url[/COLOR]('bg-body.png')

Of course, make sure the path is right too. At the moment, the CSS assumes the image is in the same folder as the CSS file.

The image- is to allow the Rails asset pipeline to work.

I basically can’t figure out what order the rules need to go in to allow IE7 and IE8 to use the PNG version, IE9 to use SVG and others to use CSS gradients because the way I have them currently does not give a png version to 7 and 8 but I do get just a static plain colour.

Can’t you just conditional comments and send the correct rule to IE7 and 8.

There seems to be a solution here but I haven’t tested it out.