high resolution CSS sprites

Question

I'm generating CSS sprites. I want to use these sprites at multiple sizes. I've searched but haven't been able to figure out how to functionally scale a CSS sprite--e.g. if the original sprite is at 150x150 and I want to display it at 50x50, how can I do that? background-size seems to break it.

I can just generate the sprites at the needed sizes, but when I do this via ImageMagick's -resize I take a noticeable resolution hit. Usually, if I find an image is unacceptably low resolution on a webpage, I just make a bigger image and scale its size, functionally increasing the resolution of the image.

Since I can't figure out how to scale a CSS sprite, I'm a bit stuck--how can I achieve arbitrary resolution using a CSS sprite?

Answer 1

The most elegant way you can do this is by using CSS3 background-size, but this is not supported on all browsers (e.g. IE<=8). You might look into IE specific transforms or filters that you can use and then add the -mz-, -webkit-, and -o- selectors to get the effect you want on the browsers you are targeting.

The least elegant way to do this is by faking the sprite scale and positioning.

The HTML

<div class="ex3">
    <img src="http://www.placekitten.com/g/600/400"/>
</div>

The CSS

.ex3 {
    position: relative;
    overflow: hidden;
    width: 50px;
    height: 50px;  
}
.ex3 img {
    position: absolute;
    top: -25px;
    left: -25px; 
    width: 150px;  /* Scaled down from 600px */
    height: 100px;  /* Scaled down from 400px */
}

The Fiddle

http://jsfiddle.net/brettwp/s2dfT/

Answer 2

I know of no way to change the size of a CSS sprite, sorry.

As for generating the CSS Sprites, try: http://spriteme.org/

Or for general image editing: http://www.gimp.org/

You could edit the individual image components, and then use SpriteMe to generate the Sprite. You don't want to generate the sprite and then resize the entire Sprite image, as then your CSS positions for each individual element would be thrown off.

Answer 3

The options I see are:

1. Either have the sprite's contents in different sizes in one sprite.

2. Or take the original sprite and manually resize it one time to create a smaller copy of it. Then reference the smaller sprite version for when you need the smaller images.