cant get svg to show with css background image

[surreal5335]

so I am trying to use an svg file as a background image to make a background gradient with multi-stop for IE9.

I have checked my svf url by itself and it loads fine.
I have it setup so that only IE9 sees this declaration, also working fine

IE9 currently is overriding the rule with another in an external css file which is loaded before my background svg rule set.

I have set the background svg with !important to take precendence (no effect)

Here is my css structure:

<link href="style.css" rel="stylesheet" type="text/css" />

<!--[if gte IE 9]>
<style type="text/css">
.gradient {
background-image: url("gradient-grey.svg") !important;
}
</style>
<![endif]-->


IE9's inspector has told me there is an background-image: none; being declared over my svg in the external file. although unchecking this rule in the inspector and thus enabling the svg rule doesnt change anything in my page.

Any ideas would be appreciated
Ben