michael_morris1 — 2012-10-24T08:18:52-04:00 — #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.
logic_earth — 2012-10-24T16:22:16-04:00 — #2
Why not use Fiddler to monitor what is or is not downloaded?
michael_morris1 — 2012-10-24T16:41:57-04:00 — #3
I was wondering if anyone would know off hand.
ron_roe — 2012-10-25T08:53:12-04:00 — #4
Modern browsers will load the multiple backgrounds.
ralphm — 2012-10-25T08:56:13-04:00 — #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]-->
ron_roe — 2012-10-25T15:11:18-04:00 — #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.