How to create CSS sprites
This technique is based on an old technique that was used in video games to build all kind of things (read more about sprites). Even though this technique is old, it is still very useful in the modern world of web-design, and if you know how to add and subtract, then we are ready to move on.
The basic concept of CSS sprites
The concept is fairly easy, you have one large image that consist of smaller images. In our case, the main image contains two cells that have an apple screen in each of them. (click here to se the main image)
The Code
Let’s look at the html for the current example. As you can see it is very straight forward.
1 2 3 4 5 6 | <div id="sprites"> <a id="top-left" href="#"></a> <a id="top-right" href="#"></a> <a id="bottom-left" href="#"></a> <a id="bottom-right" href="#"></a> </div> |
The CSS
It?s time to apply the magic, and as you can see here as well, it is very simple. The magic is how we are positioning the background image in each link and every time we hover over a new link we will move the background image to a new position.
1 2 3 | a#top-left { background: url('apple_sprite.jpg') 0px 0px no-repeat; } a#top-left:hover { background: url('apple_sprite.jpg') 0px -210px no-repeat; } a#top-left:visited { background: url('apple_sprite.jpg') 0px -210px no-repeat; } |
1 2 3 | a#top-right { background: url('apple_sprite.jpg') -130px 0px no-repeat; } a#top-right:hover { background: url('apple_sprite.jpg') -130px -210px no-repeat; } a#top-right:visited { background: url('apple_sprite.jpg') -130px -210px no-repeat; } |
1 2 3 | a#bottom-left { background: url('apple_sprite.jpg') 0px -105px no-repeat; } a#bottom-left:hover { background: url('apple_sprite.jpg') -0px -315px no-repeat; } a#bottom-left:visited { background: url('apple_sprite.jpg') -0px -315px no-repeat; } |
1 2 3 | a#bottom-right { background: url('apple_sprite.jpg') -130px -105px no-repeat; } a#bottom-right:hover { background: url('apple_sprite.jpg') -130px -315px no-repeat; } a#bottom-right:visited { background: url('apple_sprite.jpg') -130px -315px no-repeat; } |
Let’s see it in action
So as you can see, there is no need for cutting up images to create an image replacing technique, especially not when IE7 comes out, because Microsoft have finally implemented hover on all elements.
Further reading
Recent Posts
[...] Me ha gustado mucho la implementación de estos sprites (no he encontrado una traducción digna) mediante CSS. [Demo] [...]
[...] Not long ago I made an example on how you could apply the sprite technique with css (how to create sprites) and since a few good people liked that effect, then why not apply it to the Sliding Door effect as well because it will save us a little bit of time when we are going to create the tab(s) (see my sprite tab here). [...]
Hi please, can you help me, css sprites are very interesting, but do they work in internet explorer 6 ??? I have a problem with this..please help, thank`s
Hi Subseth
Yes, the technique works fine in IE 6 :)
what are your having trouble with?
How do you manage sprites? Say for example you have 50 or so images in a sprite file. You didn’t create it, another developer did. You need to reference the 37th one. How do you figure out how to reference it? The offset.
What if you need to replace the 35th one, same situation.
Assume that the sprite is already in production with icons all over the site slicing and dicing their way to blissful rendering.
Hi Rws
it should be fairly easy to reference a sprit, all you really need is the x,y coordinate and the width and height for that sprite.
when you have the x and y coordinate then you know the starting point of the sprite and the width and height tells you when the sprite ends.
if you a going to replace a sprite, then you should replace it with a sprite that has the same dimensions or else you might run it to a lot of work…
hope that helps you a bit.
Nice Article.. I will have something to add if you don’t mind :). (I know I am posting this comment after 3 yrs of it’s published date)..
You can actually shorten the CSS code for the above example I believe:
Taken from your CSS:
div#sprites a
{
float: left;
width: 130px;
height: 105px;
display: block;
background-image: url(’apple_sprite.jpg’); /* add this */
background-repeat: no-repeat; /* add this */
}
Then on each of the anchor tags, all you need to do is add position, like below:
a#top-left { background-position: 0 0; }
a#top-left:hover,a#top-left:visited { background-position: 0px -210px; }
….
In this way, the CSS code is less and also if you decide to replace the image, you won’t have to through each of the anchor tags and modify its background image’s url.
Thanks,
[...] How to create CSS sprites http://fatagnus.com/how-to-create-css-sprites/ [...]
[...] 3, 2008 · 1 Comment If you want to know more about CSS sprites and how to put them together, feast your eyes on [...]
You can create sprites automatically with Web Optimizer - http://code.google.com/p/web-optimizator/
[...] How to create CSS sprites [...]
[...] Sprites的文章，基本把其原理和机制说明得很清楚。 What Are CSS Sprites? How to create CSS sprites？ Creating Rollover Effects with CSS Sprites 26 十一月 2009 11:25上午 - web标准化 [...]
[...] How to create CSS sprites [...]
[...] a reunirlos en 1 para reducir casi a la mitad el número total.Después vamos a usar la técnica de Sprites CSS (vía el generador automático) para unificar todas las imágenes que usan tanto el tema K2/Vader [...]
[...] How to create CSS sprites [...]
[...] How to create CSS sprites [...]
[...] CSS Sprite的使用 有几篇关于CSS Sprites的文章 What Are CSS Sprites? How to create CSS sprites Creating Rollover Effects with CSS Sprites Building a Dynamic Banner with CSS Sprites High [...]