HTML & CSS
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.
Why not use Fiddler to monitor what is or is not downloaded?
I was wondering if anyone would know off hand.
Modern browsers will load the multiple backgrounds.
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]-->
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.
This topic is now closed. New replies are no longer allowed.