High Resolution Css Sprites

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 o

Solution 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

<divclass="ex3"><imgsrc="http://www.placekitten.com/g/600/400"/></div>

The CSS

.ex3 {
    position: relative;
    overflow: hidden;
    width: 50px;
    height: 50px;  
}
.ex3img {
    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/

Solution 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.

Solution 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.