Does EVERY image in a CSS file load when the file is loaded?

Question

Let's say I have my whole sites CSS in 1 css file so it is fairly large, I am wanting to know if a page uses 3 classes with something like below that request 3 images from the server, lets say there is something like 50 of these in the whole css file, does everyone get called/requested from the server or just the 3 that a page needs?

background-image:url(http://localhost/images/btn3.gif);

Answer 1

There's one easy way to find out (ok, not easier than just asking Stack Overflow). Put this into a CSS file:

#nonExistantElement {
    background-image: url(myScript.php);
}

and make that script record the hit by writing to a file or something.

---

Ok, I've just done that myself now. Turns out: no it doesn't get the file. (Tested on Firefox 3.5.2, IE7, Chrome 2.0)

Answer 2

I don't think so. Images required for hover pseudo-class (mouseover) are loaded when you hover, and there can be a noticeable lag on the first appearence (unless you use a cheat to get it preloaded).