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

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

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/