CSS sprites and http-requests

I think I understand the basic idea of CSS sprites: A given rollover only needs to http-request a single image for both states. But what about situations where there are multiple elements all specifying the same background image? For example:

[CODE]#element1
{
background-image: url(“spritesheet.png”);
}

#element2
{
background-image: url(“spritesheet.png”);
}[/CODE]

Will this generate two http-requests (one for each element), or are browsers smart enough to cache spritesheet.png locally? I ask because I’d like to use CSS sprites to create a big image map by specifying the same master spritesheet as the background image of each (li a) in a ul, changing background-position for (li a:hover), but obviously this wouldn’t be viable if each (li a) results in a separate http-request.

Also in #CSS _↴