Where’s my Background Image IE8?

Preamble/Rant

To say that I hate Internet Explorer would be an understatement. Quite simply, like many web designers/developers out there, I’ve wasted too many hours of precious time dealing with IE6 and fixing IE-related bugs for our relationship to be any other way.

Since I don’t like such feelings to be part of my life, a while ago I made the very healthy decision to stop supporting IE6 and IE7 in my projects. It’s something I would recommend to every web designer/developer, not only as a way to keep your mental sanity, but also in order to push – and thus educate* – people to upgrade to newer versions of Internet Explorer, or to better browsers altogether. Supporting obsolete browsers is like supporting a bad habit, and I’m done with that.

As Internet Explorer goes, that pretty much leaves me with just IE8 and IE9 to cater for, which is a walk in the park compared to the ugliness I had to deal with in the past.

Shall we bury the hatchet then?

Considering that I’ve just wasted two hours testing and scratching my head trying to solve a quite odd IE8 bug, I guess not. Not quite, yet.

To turn those two hours into something useful, I thought I’ll explain what the bug was and how I fixed it.

The issue

On a client project, I had assigned a tiled background image to the body tag. Pretty straightforward CSS, using the shorthand background property:
body {
background:#FFFFFF url(images/header-bg.gif) repeat-x 0 0;
}

The background image worked just fine on Firefox, Safari, Chrome and IE9, but was missing completely on IE8. To be honest, I had never heard of this IE8 issue with background images, nor had it ever happened to me before. Even stranger, the other background images in my CSS were all displaying correctly.

Possible causes & solutions

A syntax error

On most of the forum threads I checked, the problem seemed to be due to a syntax error: apparently, if you don’t put a space between the closing round bracket and the background-repeat value (in this case “repeat-x”), the background image won’t work in IE8 (while it still will on the other browsers). That’s good to know, although we should always use the correct syntax, regardless of the browser.

Being my syntax correct, there had to be another cause.

The image format?

Another possible cause that came up frequently in my search, was the image format. Some people had written they solved this issue by changing the background image from GIF/JPG to PNG. This doesn’t sound right to me. If IE ever had troubles with image format, PNG was surely the most problematic one and I don’t see why IE8 should have difficulties displaying GIFs or JPGs when even IE6 could (in fact, my other non-PNG background images were working just fine). For the sake of testing, I tried this solution anyway and – not surprisingly – it didn’t work.

So I wouldn’t say that the image format is a possible cause for this issue, but a wrong path to the image sure would be, so it’s good to first make sure that the image URL in your CSS is correct.

JQuery & Nivo Slider Script

Believe it or not, good old Javascript turned out to be the party pooper this time. Whenever possible, I always put my JS at the bottom of the markup, before the closing body tag, as it helps the page loading time. For some inexplicable reason, that caused the issue with my background image on IE8. Moving both the Nivo Slider and the JQuery script up to the head section made the trick: my long-gone background is now finally displaying ok on IE8, too.

I’ve only found one short thread about this background-image/javascript conflict on IE8 (and had to dig to find it) so I hope this article can help you save some time.

*Learn how to browse happy

This post is also available in Italian