Question

When using an IE Conditionals (such as the code below) with !important, regardless of the browser the background is defaulting to the background-color with !important even while inside an IE conditional.

How could one rewrite this so that the browser accepts the background color in less than IE9 and the image (with height/width: 100%, no-repeat) in IE9 and other browsers?

Note: I plan to use this in a WordPress site where the theme is automatically setting the color or image by default, so I have to use the !important to override the default theme styling.

body {
<!--[if lt IE 9]>
background-color:#c1beb2 !important;
background:#c1beb2 !important;
<![endif]-->
<!--[if gte IE 9]>
background-image: url("http://example.com/wp-content/example.png") !important;
background-position:left bottom;
background-size: 100% 100%;
background-repeat: no-repeat;
<![endif]-->
<![if !IE]>
background-image: url("http://example.com/wp-content/example.png") !important;
background-position:left bottom;
background-size: 100% 100%;
background-repeat: no-repeat;
<![endif]>
}

Answer 1

Conditional comments are meant to be used in HTML, not CSS.

That is, link to an IE specific style sheet like this in your HTML:

<!--[if lte IE 9]> 
<link rel="stylesheet" href="/ie.css" type="text/css" media="no title" charset="utf-8" />
<![endif]-->

That’s the proper way to do it. If you don’t want to create a whole other IE-specific stylesheet, you can rely on CSS IE Hacks.