Resize images from sprite

Question

Is it possible to resize images which we receive from sprite. I mean like this:

background: url(../images/sprite.png) no-repeat -1px -1170px;
display: block;
height: 14px;
width: 14px;

Is it possible to change width and height from sprite? For example if I have pencil icon in sprite with resolution 40x40 but I want to display this pencil icon like 20x20 pixels

Thank you, in advance.

Answer 1

Another solution is to use the zoom: .5; property of css3.

Answer 2

You can use the background-size property in css3:

background-size: 50% 50%;

Answer 3

Changing background-size will make you have to revalidate width and height of container every time.

When using zoom you will not have support for firefox

...

Another option is to use:

transform: scale(.5); /* 50% smaller */
transform: scale(1.5); /* 50% bigger */

The backside is that element after scaling will still keep its original space.