how to squeeze a partial background image from an image sprite

Question

I have this fiddle which generates single country flags from a image sprite. I want to squeeze each flag because the width of flag seems to be too wide.

JSFiddle Demo

For instance the Norwegian flag is too wide in the jsfiddle sample.

How can I do this? Thank you.

#flag1 {
    width: 120px;
    height: 60px;
    background-image: url(http://i.hizliresim.com/e7Y5dm.png);
    background-position: -120px 0;
}

#flag2 {
    width: 120px;
    height: 60px;
    background-image: url(http://i.hizliresim.com/e7Y5dm.png);
    background-position: -480px 13800px;
}

#flag3 {
    width: 120px;
    height: 60px;
    background-image: url(http://i.hizliresim.com/e7Y5dm.png);
    background-position: -1200px 19020px;
}

Answer 1

One solution is to scale (transform:scale(x);) the whole element (the div in this case)
For example transform:scale(0.5); will scale the element to half its size, but keep in mind that it retains the initial space in the DOM flow.

---

Another way is to use the background-size property to resize your image, but you will have to recalculate the positioning as well..

---

demo at http://jsfiddle.net/JA97b/5/

---

Additionally, in your CSS you should group common properties to a single class and apply that instead of repeating tem for each flag..

.flag{
    width: 120px;
    height: 60px;
    background-image: url(http://i.hizliresim.com/e7Y5dm.png);
}
#flag1{background-position: -120px 0;}
#flag2{background-position: -480px 13800px;}
#flag3{background-position: -1200px 19020px;}

and use

<div class="flag" id="flag1"></div>
<div class="flag" id="flag2"></div>
<div class="flag" id="flag3"></div>

Answer 2

To get exactly what you wanted I used background-size just to reduce the width of your sprite. So I reduced the width of the sprite about one sixth and adjusted the width of the element in accordance.

#flag3
{
    width: 100px;
    height: 60px;
    background: url(http://i.hizliresim.com/e7Y5dm.png) 0 0 no-repeat;
    background-position: -1000px -480px;
    background-size: 1500px 780px;
}

Demo