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.

possible duplicate of [How can I scale an image in a CSS sprite](http://stackoverflow.com/questions/2430206/how-can-i-scale-an-image-in-a-css-sprite) — Kris, Oct 30 '12 at 12:25

score 32 · Answer 1 · answered Jun 20 '13 at 17:01

32

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

answered Jun 20 '13 at 17:01

zmanc

5,201
12
45
90

1

Boom! Works like a champ. I only needed to support Mobile. – Gamak Jun 27 '14 at 01:28
2

I wish I could have given you more up votes. This is an old one but still very valid. – Alberto Aug 27 '15 at 16:56
6

unfortunately not supported in firefox. – Tomasz Mularczyk Dec 09 '16 at 16:02
I think transform: scale(.5); /* 50% smaller */, would be better answer. As it supports everywhere. – Yash Vekaria Nov 23 '17 at 06:48

score 9 · Accepted Answer · answered Nov 26 '11 at 14:51

9

You can use the background-size property in css3:

background-size: 50% 50%;

answered Nov 26 '11 at 14:51

Gregg B

13,139
6
34
50

3

Your positioning will probably need to change since the sprite is now half the size. – Gregg B Nov 26 '11 at 15:19
1

Make positioning a percentage, and then it doesn't need to change. – Jakob Jingleheimer Mar 02 '15 at 06:13
@jacob Using Percentage combined with zmanc 's answer got me to where I wanted to be!! Thanks guys. – MikeG Jan 05 '16 at 14:55

Tomasz Mularczyk · Answer 3 · 2016-12-09T20:54:50.807

4

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.

edited Dec 09 '16 at 20:54

answered Dec 09 '16 at 16:07

Tomasz Mularczyk

34,501
19
112
166

score 2 · Answer 4 · edited May 23 '17 at 12:34

After googling for this answer, I found a solution here: https://stackoverflow.com/a/10826761/2100636

It worked in that it was responsive, although it is not using a background image to do it... it does work in all browsers as opposed to using the background-size option, where it would not work in old browsers - this method does.*

*well at least when I tested it.

You can see the demo here: http://tobyj.net/responsive-sprites/

I employed this in the situation where I have an icon on the left and text on the right, and it would scale my icon down to maintain responsiveness.

pery mimon · Answer 5 · 2018-05-06T18:22:47.357

2018 solution:

Lets say we have sprite of grid of 5X4.

First step is fixed the size of the background image relative to the continener

.sprite{ background-size: 500% 400%; }

now we have responsive sprite.

next is to use precente to position the background so just our figure will show up. the calculation are like that :

background-position: calc( var(--colum) * 100% / 5 - 1) calc(var(--row) * 100% / 4 - 1);

Now in every figure we need to define on wich colum and row is position

.figure1{ --row:1, --column:0 }
.figure2{ --row:1, --column:1 }
// etc...

so togther we have :

.sprite{
     background-size: 500% 400%;
     background-position: calc( var(--colum) * 100% / 4) calc(var(--row) * 100% / 3); 
 }

.figure1{ --row:0, --column:0 }
.figure2{ --row:0, --column:1 }
.figure3{ --row:0, --column:2 }
.figure4{ --row:0, --column:3 }
.figure5{ --row:1, --column:0 }
// etc...

Nice demo with cards:https://repl.it/@perymimon/responsive-sprite

Full tab: https://responsive-sprite--perymimon.repl.co/

Nice, but in your example u use a css grid sprite: all single images inside the sprite are equals for dimension. Can your solution be adapted to work also for sprites that contains images of various dimension? — user1561017, May 06 '18 at 16:15
if the sprite layout on some grid system I assume you can still work with that method just skip on some tiles. The main thing is that you can calculate the position with percent — pery mimon, May 06 '18 at 19:02

score 0 · Answer 6 · answered May 01 '17 at 07:40

Using transform will only change the zoom of image not size. In order to change sprite image size from 40px by 40px to 20px by 20px, you need to change the size of sprite image to 20px by 20px and then adjust background-size to fit image sprite in that area. Also you need to adjust background-position in order to display correct portion of sprite.

#home {
    width: 46px;
    height: 44px;
    background: url(https://www.w3schools.com/css/img_navsprites.gif) 0 0;
}

#next {
    width: 43px;
    height: 44px;
    background: url(https://www.w3schools.com/css/img_navsprites.gif) -91px 0;
}


#resizedHome {
    width: 20px;
    height: 20px;
    background: url(https://www.w3schools.com/css/img_navsprites.gif) 0 0;
    background-size: 306%;
}

#resizedNext {
    width: 20px;
    height: 20px;
    background: url(https://www.w3schools.com/css/img_navsprites.gif) -102px 0;
    background-size: 306%;
}

<h5>
Original Sprite Image
</h5>
<img id="home" ><br><br>
<img id="next" >
<br><br>
<h5>
Resized Sprite Image
</h5>
<img id="resizedHome" ><br><br>
<img id="resizedNext" >

Or

https://jsfiddle.net/vivek11432/ep0m4yf6/

How do you calculate the new background size and the new position depending on the size to be transformed (46px -> 20px)? — andersuamar, Sep 28 '17 at 13:22

score 0 · Answer 7 · answered Nov 26 '11 at 14:52

0

background-size is what you are looking for.

#example1 {
    background-size: 40px 40px;
}
#example2 {
    background-size: 20px 20px;
}

answered Nov 26 '11 at 14:52

Will

19,661
7
47
48

This is close, but the sprite is almost definitely bigger than the specific icon he wants to shrink. if he shrunk the whole background to 20x20 his icon would be much too small. – Gregg B Nov 26 '11 at 15:36

Resize images from sprite

7 Answers7

Linked