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">
<h1> </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# TYPE URL 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 [[email protected]]
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/
