0

I got a collection of flag sprites here.

How it basically works:
It has one png file containing all the flags, that's used as a background of a class. There's a different subclass for every flag, which set's the background position.

.flag {
width: 18px;
height: 12px;
background:url('images/flags.png') no-repeat
}

.flag.flag-ao {background-position: -18px 0}

Unfortunately it's so small you need a magnifier.
Is there a way to zoom/stretch it?

(I tried height and width but they just uncover rest of the flags)

Community
  • 1
  • 1
Claudio
  • 884
  • 1
  • 15
  • 31
  • It will become ugly if you make it bigger. It's better to use bigger images. – gitaarik Jan 09 '14 at 11:35
  • `background-size: contain;` or `background-size: cover;` ? – Abhitalks Jan 09 '14 at 11:36
  • 1
    you can use transform scale property to you div but it will not support old browser transform: scale(2,2); -ms-transform: scale(2,2); -webkit-transform: scale(2,2); – rrugbys Jan 09 '14 at 11:37
  • Besides that, this question has been asked before and you can find it in 1 simple search... http://stackoverflow.com/questions/376253/stretch-and-scale-css-background – gitaarik Jan 09 '14 at 11:38
  • @abhitalks No, it will uncover the other images. – Claudio Jan 09 '14 at 11:43
  • @Claudio: would be better to understand if you could share relevant markup and css. better still, make a fiddle if you can. – Abhitalks Jan 09 '14 at 11:44
  • Found an attribute `zoom` in CSS3. Not very browser friendly though, as older browser don't support CSS3. @rednaw You were right. – Claudio Jan 09 '14 at 11:50
  • @abhitalks Sorry, I can't really make a working fiddle for some reason. http://jsfiddle.net/heb6c/ But there's the markup that should work – Claudio Jan 09 '14 at 12:04

1 Answers1

1

I have done this But the image will blur due to strech Check if it work out for you

     .flag.flag-ao {background-position: -18px 0; 
        -webkit-transform:scale(3,3);
        -moz-transform:scale(3,3);
        -ms-transform:scale(3,3);
         transform:scale(3,3);
     }

Check on fiddle

rrugbys
  • 282
  • 1
  • 10
  • Yep, it destroys the quality. It also stacked my two images... `zoom` worked the best for me, but also failed in quality. – Claudio Jan 09 '14 at 11:51