I just uploaded a new design for the church of which I'm a volunteer
web guy. The HTML and CSS validate.
A Speed Report sees two large background images loading for the
header/banner, but I think my CSS only should load one. They're big
images, so if it's loading both of them, it's a real page weight
problem. Here are the details:
A different header/banner image loads depending on a body tag id.
Here's the relevant CSS:
#twoCol #header {background-image:url(../img/header2col.jpg);}
#threeCol #header {background-image:url(../img/header3col.jpg);}
#header {
padding: 0;
background-repeat: no-repeat;
background-position: center top;
height: 248px;
}
and here's the relevant HTML:
body id=threeCol
div id=header
h1nbsp;/h1
/div
It seems to work fine! However, I just discovered that a Speed
Report seems to be seeing BOTH header background images loading
whereas my CSS is supposed to be only loading one. Here's the
relevant part of the report:
QTY SIZE# TYPEURL COMMENTS
1 112194 CSS IMG http://www.holycrossoca.org/img/header3col.jpg
Header size = 341 bytes
1 112189 CSS IMG http://www.holycrossoca.org/img/header2col.jpg
Header size = 341 bytes
Here are the relevant pages:
http://www.holycrossoca.org
http://www.holycrossoca.org/css/hc.css
http://analyze.websiteoptimization.com
Can anyone tell me whether I've misunderstood my CSS somehow, and it's
actually telling the browser to load both header images? And if my
CSS is doing what I think it's doing, how does that Speed Report
somehow see both of those header images loading?
Many thanks!
Theophan
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
