Assuming that you're describing three different sizes, there are two ways this can be approached (that I've tried at any rate):
- Build up the sprite to include all three image sizes and switch the background-position (using media queries).
- Make the sprite once at the largest size, and use the CSS3
background-size
property to scale up/down the image.
I personally tend to opt for the background-size
approach (although also tend to combine this with a second version of the sprite at 2x the size for retina images).
Do bear in mind that background-size doesn't currently have complete coverage, but there are the normal three vendor prefixes you can use, plus the 'normal'. Eg:
-webkit-background-size: 100px 100px;
-moz-background-size: 100px 100px;
-o-background-size: 100px 100px;
background-size: 100px 100px;
The numbering is the same as anywhere else in CSS: width, then height.
If you then wanted to half the size of the element, you would simply switch the dimensions:
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
-o-background-size: 50px 50px;
background-size: 50px 50px;
Although do note you would also have to include new background-positions for each element using the sprite at that view size.