I've got a responsive site that uses 2 images in the header and footer.
(the site is in the Site Design & Content Reviews forum – background problem. I don't want this issue showing up at the top of search results when people look for the site, so I won't post the link here).

In IE8, the header and footer backgrounds don't show up at all, but the pattern that fills the wrapper behind them does – making it impossible to read anything.

I've tried separate stylesheets for IE8. Tried Modernizr (.multiplebgs), tried adjusting the CSS.... Can't get anything to work. I don't need the background images in IE8, a plain white background would be fine.

I tried making the header/footer DIVs so maybe IE8 would recognize them (div class="header"), but that messes up the site in other browsers. Decided to try going after the wrapper since it already has an ID on it and it does display in IE8. Is there someway to leave the background image in place for modern browsers and just have a white background for old IE? :

Is any of this useful. I used a few tricks off this a while back for a site I'm working on.
http://www.conditional-css.com/usage

I've looked at so much of this stuff over the last 3 days (Yikes! 3 days spent on this ).
I would hope to do this without having to install a PHP script (as for the conditional stuff).
It seems others get this to work very simply within the CSS:


Supposedly, old browsers will render the first background listed and skip the others; newer browsers will display both backgrounds. I had no luck with this.

I'm going to try this idea next...

You could sneak into the clients pc and update their browser.

Of course, that didn't work either.
This really shouldn't be such a big to-do.

http://theie8countdown.com/join-the-cause

I don't know much at all about complicated background combinations, such as yours , but I came across this paragraph in Ben Frain's "Responsive Web Design with HTML5 and CSS3":

"Browsers that don't understand the multiple backgrounds rule (such as Internet Explorer 8 and below) will ignore the rule altogether so you may wish to declare a 'normal' background property immediately before a CSS3 multiple background rule as a fallback for older browsers."

My interpretation is then that, if you want a simple white background as fallback, you would put in a completely separate, "old-fashioned' background rule first, followed by the CSS3 multi-background rule:

body {
background-color: #ffffff; /* i.e. the old-fashioned stuff */
background: /* ...the new, multi-background stuff... */
}

I am all for keeping things very simple and I'm getting a bit confused by the increasing complexity here with multitudes of "If IE lt 9...." -rules and multitudes of style sheets, etc...

PS: ...but I guess you know all about that already, and by now you have tried all possible combinations.. (sigh...)

I thought she had done that in one of the posts in the other thread but I can't guarantee she did after looking at it.

Yes, I tried that. But it gets ignored by IE8 as well and displayed nothing.

I really would have preferred a fall-back for old IE browsers, but out of desperation, I put the warning badge (from the link above) on every page. Now people will see the notice they are using an outdated browser at the top of every messed up page.
I've got to move on and get other stuff done, but I'll give this another go when I've got some time. I'm really curious why using Modernizr won't get the double background to work???
But a simple css rule for a plain white background in place of the double background would be best