Many requests to one picture file which is referenced from CSS

Question

Hi, I have created CSS-sprite file for reducing number of requests to the server.

But when the page is loaded, I can see in Firebug many GET requests to the same picture file (accoring to number of CSS rules applied with that picture).

Probably, from that bunch of requests only one is real and the rest are taken from browser's cache, but this is just an assumption as I can see timings on making HTTP request.

So I wonder whether is that normal?

PS I am using Java webapplication and Tomcat container. Picture resourses are retreived from default servlet, so appropriate LastModified headers are set

Answer 1

Source: YSlow addon for firebug

Try configuring ET Tags perhaps?

Kindness,

Dan

Answer 2

is it possible that you have your browser cache disabled? on firefox, type about:config and make sure that the cache is on.

Answer 3

If you're referring to an image sprite, I suggest you only define it once in the css within a class and there after only use the background-position property.

Example CSS:

.spriteImg {
    background-image: url('../images/spite.png');
}
.headerTile {
    background-position: 0 0;
    background-repeat: repeat-x;
}

Example HTML:

<div id="header" class="spriteImg headerTile"></div>

Here's another example: http://css-tricks.com/css-sprites/

Answer 4

Yeah, seems to be the Firefox 3.5 problem. Here is similar case

Thanks all for participation