Dear folks. Imagine a sprite image called icons.png assigned to css class .icons with various 10x10px graphs. Now you want another class which scales up the sprite graphics exactly twice 200% (making them 20x20 pixels on the screen)

How do I achieve this enlargement purely in CSS?

Much appreciated!

.icons, .iconsbig{    /* WORKS FINE */
background-image:url(http://site.org/icons.png);
background-repeat:no-repeat;
vertical-align: middle;
display: block;
height:10px;
}

.iconsbig{    /* make this one twice as big as the original sprite */
background-repeat:no-repeat;
height:20px;
background-size: 20px auto;
    image-rendering:-moz-crisp-edges;
  开发者_开发知识库  -ms-interpolation-mode:nearest-neighbor;
}

update:

problems with the above code:

• It works in IE9, but not in FireFox, by most used browser doesnt know how to resize????
• in IE9, the enlargement is smudgy and not neithrest neighbour pixel perfect at all??

It is supported in pretty much everything except for < IE9...

.iconsbig {  
    -moz-background-size: 20px;
    background-size: 20px;
    image-rendering:-moz-crisp-edges;
    -ms-interpolation-mode:nearest-neighbor;
}

W3C spec.

Update

Looks like Firefox wants its vendor prefix (-moz) on the property.

You can use the css3 background-size property:

.iconsbig {
  background-image:url(http://site.org/icons.png);
  background-size: 20px 20px;
}