Loading sprites 1 time, or many times?

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, a开发者_JAVA百科nd show different parts of it in the web page ?

---

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.

---

browsers should download it one time except you're setting some ugly kind of no-cache-header-things

---

It will be downloaded once unless cache is turned off, get Firebug and watch the HTTP requests then you'll get a better idea of what happens when the page loads.

---

It'll only be downloaded once, don't worry.