Optimization Question - IE 8 vs. the others

HTML & CSS
1

So, I have a fairly complicated background image on my site that I found I could get down to 70K if I split it up into layers and loaded in multiple backgrounds. Rather than do a 4 ply wrap on all pages, I’d rather just have IE 8 users suffer the pixelated 90K version. That leads to this CSS


background: url(../images/background.jpg) top left no-repeat fixed;
  background: url(../images/background_l4.png) top left no-repeat fixed,
    url(../images/background_l3.png) top left no-repeat fixed,
    url(../images/background_l2.gif) top left,
  	url(../images/background_l1.jpg) top left no-repeat fixed;

Will the other browsers attempt to load the first background? If so, I’ll need to push that declaration off to it’s own IE specific stylesheet.

2

Why not use Fiddler to monitor what is or is not downloaded?

3

I was wondering if anyone would know off hand.

4

Modern browsers will load the multiple backgrounds.

5

Modern browsers should load the last one in the order, so I’d expect they wouldn’t actually download the first bg image. But I can’t vouch for it.

If you want to make sure of it, you could serve the IE background in an IE-only style sheet via a conditional comment:

<!--[if lte IE 8]><link rel="stylesheet" type="text/css" href="/css/ie.css"><![endif]-->
6

From experience, if the multiple background declaration comes after the single background dec, modern browsers will ignore the single background and load the multiple. No need for a separate stylesheet in this case.