How to resize and enlarge an image (e.g. sprite icons) using CSS 3?

Question

Dear people. Imagine a sprite image icons.pngassigned to the css class .iconswith various 10x10px graphics. Now you need another class that scales the graphics of the sprite exactly twice 200% (making them 20x20 pixels on the screen).

How to achieve this extension exclusively in CSS?
Really appreciate!

.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, most browsers used do not know how to resize.
• in IE9, the extension is dirty and not a neighboring pixel perfect at all.

Answer 1

, < IE9...

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

W3C.

Update

, Firefox (-moz) .

Answer 2

css3 background-size:

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