Creating & Using CSS Sprites

Written by David Walsh on Tuesday, June 3, 2008

The idea of CSS sprites is pretty genius. For those of you who don’t know the idea of a sprite, a sprite is basically multiple graphics compiled into one image. The advantages of using sprites are:

Fewer images for the browser to download, which means fewer requests to the server.
Total images size is generally smaller, so less download time for the user and less bandwidth consumption.
No ugly mouseover code. No javascript — only CSS!

For this example, I’ve used the DW illustration. I have a color version and a grayscale version which I have merged into one file as you can see below.

Now, it’s time to see how the system works.

View Demo

The HTML

	<a href="http://domain.com" id="logo-link"> </a>

Just a very simple anchor tag with a unique ID.

The CSS

#logo-link
{
	width:191px;
	height:151px;
	text-decoration:none;
	display:block;
	background-image:url(dw-logo-sprite.jpg);
	background-position:191px 0;
}
#logo-link:hover,#logo-link:active	{ background-position:0 0; }

When the image initially loads, I want the grayscale version, which is on the right site. For this reason, I set the link’s initial background position 191 pixels to the left. When someone mouseovers the link, however, I want to show the color version. It’s only then that I remove the 191 pixels.

Wanna see the working version?

View Demo

Download PDF

Follow via RSS Epic Discussion

June 03 / #

Mark says:

I have known about this for a long time but I never knew it was called sprites. :)

June 03 / #

Bobby Hargett says:

Another interesting side effect is that you can’t copy the image (in IE at least) and this gives you some image protection (for newbies that is).

June 03 / #

Jesus DeLaTorre says:

Hey David, I’m curious as to what this does? href=”javascript:;”

June 03 / #

NYC guy says:

It’s cool. Any tools can create the sprite images other than the expensive PS?

June 03 / #

david says:

@Jesus: “javascript:;” tells the link to do nothing when clicked. I think another method is going “void(0);”.

@NYC Guy: I recommend GIMP. Free, but not as powerful as Photoshop.

June 04 / #

design says:

Good points, but make it more generally

June 04 / #

Rob Simpkins says:

NYC Guy, I have found inkscape to be a useful tool instead of photoshop, and it is free to download online too :)

http://www.inkscape.org.

June 04 / #

Lindsey says:

I actually wrote a similar article last week explaining how to create the image, and the HTML/CSS for this for navigation images. Also, I explained how to have the text input there so it’s not jsut a blank tag so in case CSS is disabled (or background images – like if you are on a blackberry) a link will appear in it’s place.

I really dig your font – is Cambria cross-browser/cross platform compatible?

June 04 / #

david says:

@Lindsey: Awesome article — I hadn’t seen that. The text-indent is genius. Great addition!

As far as Cambria, every browser I’ve checked my site in has it. I’m not a Mac guy, but I’m pretty sure it works there too.

June 18 / #

Ryan says:

I don’t know what browser support is like for this (I’ve checked it in IE7 and Firefox5), but by the W3 recommendation for CSS 1 this should work:

a.rollovers{
background-position: 100% 0;
}

a.rollovers:hover, a.rollovers:focus, a.rollovers:active{
background-position: 0 0;
}

I’m a fanatic about improving programming style. Mostly because I’m lazy. If this helps, consider it my way of saying thanks for a post that resolved my debate between keeping style in the stylesheet or avoiding ugly background flash.

June 18 / #

Ryan says:

…ahem. Firefox 2, I mean. God knows where the 5 came from.

September 08 / #

Paul says:

How about adding some mootools magic to the effect?

Similar to what they did with JQuery here
http://alistapart.com/articles/sprites2

September 08 / #

david says:

@Paul: Thanks for the suggestion!

September 17 / #

Deyn Deny says:

hi david, thx for this tut.. i use this for my navigation.

September 20 / #

Sven says:

Thanks for sharing this.

I am not good with css so I am hoping for some help with this “problem”:

When I use the same css as you do and wants to line up some images (“share icons” and Smilies” with no hover) I get theme below each other and not in a line.

I have tried to add the classic “nobr” tag and the css “white-space: nowrap;” – but still it breaks.

Also: when I use this for share this icons and “smilies”, should I add the “background image” for each of the icons or is there a better way?

I am sure this is a small problem for you css experts, but please give med some feedback on this.

Thanks :)

a.shock { background-image: url('css-spirite.gif'); background-repeat: no-repeat; background-position: -40px -223px; width: 15px; height: 15px; display: block; overflow: hidden; } a.wink { background-image: url('css-spirite.gif'); background-repeat: no-repeat; background-position: -116px -223px; width: 15px; height: 15px; display: block; overflow: hidden; }

September 22 / #

easwee says:

If I get your problem right you want to display links with icons all in one line? If so you defined display:block on the a – this means it is now a block element – not inline anymore. Block elements get a 100% width and always fall one under another.

To solve this add float:left; to your links and all of your a tags will float to the left part of the containing div. Also don’t forget to clear them afterwards or set overflow:hidden on the container element so elements below won’t fall under links.

Also avoid adding html elements just to solve design issues.

September 22 / #

Sven says:

@easwee: Thanks for your reply.

Well, I am learning more and more about CSS, like “inline” and “block”. Problem solved, thanks again :)

October 11 / #

sunnybear says:

There is a free tool to create CSS Sprites automatically – http://sprites.in/ .
If you are interested in website speedup you can also try Web Optimizer application (also as a Wordpress or Joomla plugin) here – http://www.web-optimizer.us/