Loading sprites 1 time, or many times?

Question

I'm wondering, if i'm doing this:

<div style="width:50px;height:50px;background: transparent url(sprite.png) 0px 0px no-repeat;">555</div>
<div style="width:50px;height:50px;background: transparent url(sprite.png) -56px 0px no-repeat;">666</div>
<div style="width:50px;height:50px;background: transparent url(sprite.png) -109px 0px no-repeat;">666</div>

Is this going to download the image 3 times ?

or is it going to download the image 1 time, and show different parts of it in the web page ?

Answer 1

It downloads the image 1 time only, and displays a portion of it in the different elements :)

It's explained in more detail at A list Apart's CSS sprites article.