How do properly use CSS Image sprites?

Question

I have a website i am trying to speed up and I am doing small things here and there. One of the things I would like to do but have not ever learned how to do is utilize image sprites.

Example here: http://flag-sprites.com/

Going to use the following code as an example:

<ul>
<li><div class"flag flag-zw"></div> Country Name</li>
<li><div class"flag flag-zw"></div> Country Name</li>
<li><div class"flag flag-zw"></div> Country Name</li>
<li><div class"flag flag-zw"></div> Country Name</li>
</ul>

I am trying to get the flags to show up beside the country name. This sprite comes pre positioned so that all I have to do is place the image and call the class. Any help would be greatly appreciated, thanks!

Step 1. Replace the periods with spaces in your class attribute. Step 2. Read the article that @Curt linked to. — Brian Ray
– Brian Ray, Commented Dec 6, 2013 at 16:03
Another great tool that goes hand in hand with sprite sheets is Sprite Cow. — Xareyo
– Xareyo, Commented Dec 6, 2013 at 16:25

Milan and Friends · Accepted Answer · 2016-12-26 23:01:04Z

3

Here's a FIDDLE

<ul>
  <li><span class="flag flag-ad"></span>Country Name</li>
  <li><span class="flag flag-ae"></span>Country Name</li>
  <li><span class="flag flag-af"></span>Country Name</li>
  <li><span class="flag flag-ag"></span>Country Name</li>
</ul>


.flag {
  background: url(http://s22.postimg.org/u0nt2h8qp/flags.png) no-repeat;
  display: inline-block;
  margin-right: 10px;
  width: 16px;
  height: 11px;
}
.flag.flag-ad { background-position: -16px 0 }
.flag.flag-ae { background-position: -32px 0 }
.flag.flag-af { background-position: -48px 0 }
.flag.flag-ag { background-position: -64px 0 }

Fiddle result

edited Dec 26, 2016 at 23:01

answered Dec 6, 2013 at 16:04

Milan and Friends

5,6101 gold badge23 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Scott S · Accepted Answer · 2013-12-06 16:27:33Z

1

It looks like the code examples already posted will get you what you need. But, in addition to that I would like to suggest the tool Sprite Cow. This tool makes finding css position values very easy.

answered Dec 6, 2013 at 16:27

Scott S

3897 silver badges20 bronze badges

1 Comment

user2833068 Over a year ago

Very nice! Thanks for your post! Now that I know how to use the sprites this tool makes it much easier. =)

Riskbreaker · Accepted Answer · 2013-12-06 16:27:41Z

0

Here you go:

I would make the flags span but div is fine too:

<li><span class="flag flag-aw"></span> Aruba</li>

CSS

.flag {width: 16px; height: 11px; background: url("http://static.flag-sprites.com/i/flags.png") no-repeat 0 0; margin-right: .3em; display: inline-block;}

.flag-aw {background-position: -224px 0;}

Example:

FIDDLE

..Theres no need to bother with "blank.gif" . If you have Phtoshop or GIMP(free) you can get the proper dimensions where the images are positioned.

edited Dec 6, 2013 at 16:27

answered Dec 6, 2013 at 16:21

Riskbreaker

4,7911 gold badge25 silver badges31 bronze badges

Collectives™ on Stack Overflow

How do properly use CSS Image sprites?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related