How to create CSS sprites

Posted

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.

	

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.

  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; }

  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; }

  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; }

  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

Example 1.

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

Create sliding doors with sprites

Share on FacebookTweet about this on TwitterShare on LinkedInShare on Google+Share on RedditBuffer this pageEmail this to someone

18 thoughts on “How to create CSS sprites

  1. Pingback: Como crear CSS sprites - aNieto2K

  2. Pingback: Create Sliding Doors with sprites » Fat Agnus

  3. subseth wrote:

    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

  4. Mark Jensen wrote:

    Hi Subseth

    Yes, the technique works fine in IE 6 :)

    what are your having trouble with?

  5. rws wrote:

    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.

  6. Mark Jensen wrote:

    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.

  7. Alif wrote:

    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,

  8. Pingback: CSS Sprite的使用 « CSSHTO

  9. Pingback: Google’s Sprite Image is a Thing of Beauty « Denver SEO & Web Design Blog

  10. Pingback: WordPress » 内容索引 » 测试 - WordPress

  11. Pingback: CSS Sprite研究与使用 » 嗨,收集分享!

  12. Pingback: CSS-CSS Sprite 图片合并技术 | Why? nwhy!

  13. Pingback: Optimizar la carga de una web | El Blog de Topilloman

  14. Pingback: About CSS Sprites | 海豚博客

  15. Pingback: CSS Sprites 学习的文章 | 可乐加糖

  16. Pingback: 生活在别处 » CSS Sprites技术

  17. Pingback: CSS Sprite | 每一天,为明天

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Current day month ye@r *