I want the background picture not to be displayed in the IE. How do I do that?

Question

Here\'s the CSS , and I want the background picture not to be displayed in IE . Instead I just want the background color to be displayed. How do I do that?

h         


        

Answer 1

I'm guessing that the problem here is background-size. IE8 and earlier don't support it, so you're seeing your image messed up in IE8 and you want to solve it by reverting to a plain background.

Firstly, I should tell you that background-size is supported in IE9 and later, so you don't need to do this as a blanket change for all IE versions. You only really need to deal with the lack of support in IE8 and earlier.

Here are some options for you:

• Pure CSS solution:
  You can take advantage of the way CSS handles unknown properties to provide a pure CSS fallback for browsers that don't support background-size, by specifying the size as a parameter in a shorthand background style:

  background: #a9ac41;
  background: url("bgimage.png") cover;
  

  IE8 will ignore the second background entirely because doesn't understand cover. Other browsers will ignore the first one because the second one overrides it. Problem solved: all browsers have a working background.

• Feature detection solution:
  You could use a tool like Modernizr to test for browser support of background-size, and then use Javascript to change the page accordingly (eg load a different stylesheet if it is/isn't supported).

• filter solution:
  Although IE8 doesn't support background-size, it is possible to use the -ms-filter property to emulate it, with some degree of success. You would use code like this:

  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";
  

  Example taken from MDN

• Polyfill solution:
  There are some 'polyfill' scripts available which implement some of the missing CSS features into old IE versions, including background-size. In this case, the one I'd recommend is CSS3Pie. Follow the instructions on the css3pie site and you'll be able to use standard background-size even in very old IE versions.

Hope that helps.