why do sprites not work with a general background? - css

Question

So for my website hostup I tried to add sprites since I had over 25 images and google pagespeed complained. I solved my sprire not displaying issue, but I am not sure why. Why is it that you have to load the image in each and everysprite, to waste bandwith and slow down pagespeed?
.sprite {
background-image: url(../img/spritesheet.png);
background-repeat: no-repeat;
display: block;
}
.sprite-backup_icon {
width: 60px;
height: 60px;
background-position: -5px -5px;
}
.sprite-cpanel_icon {
width: 60px;
height: 60px;
background-position: -75px -5px;
}
.sprite {
background-image: url(../img/spritesheet.png);
background-repeat: no-repeat;
display: block;
}
.sprite-backup_icon {
width: 60px;
height: 60px;
background: url(../img/spritesheet.png);
background-position: -5px -5px;
}
.sprite-cpanel_icon {
width: 60px;
height: 60px;
background: url(../img/spritesheet.png);
background-position: -75px -5px;
}
html code
<div class="sprite-backup_icon"></div>
So the 2nd. works just fine, but the 1st. does not display any image, Just a blank image with the defined width and height, why is this?

Answer 1

To answer your first question:
If the browser finds an image in a Style Sheet, it will download it and then store it in your browsers cache. The next time that same image is found/requested in a Style Sheet from the same URL (even during the same initial page load), it will be served from cache. NOT re-downloaded. So while you may have spritesheet.png 3 times in your Style Sheet, it is only downloaded once and not wasting bandwidth or page loading speed.
It is because of this caching feature that sprites are favoured in providing things like icons and other smaller images.
For your second question on why your first CSS example does not work, it could be any number of issues ranging from a simple typo, or all the elements you are wanting to use the sprite with not having the sprite class.
In order to properly help you with this problem, we need to see your HTML that goes along with the posted CSS. Please make an edit your question and add your HTML as a code snippet.