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 150×150 and I want to display it at 50×50, 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/