Home/ Questions/Q 835291
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T04:48:15+00:00

I have 3 different images and want to create a sprite using CSS. I

  • 0

I have 3 different images and want to create a sprite using CSS. I understand that will reduce HTTP requests. However, I am totally new to this concept and have no idea as to how to approach this.

What would be best bet for me? Also I have seen there are some CSS sprite generators where you submit a .zip of images and it combines them.

I tried doing that, but did not understood what was happening. Any guidance regarding creating and using CSS sprites would be highly appreciated.

Update: I have gone through the A List Part article but it was not very clear to me. Can someone provide an example of using a CSS sprite? [A short, self-contained example in an answer is preferable for SO than just a link to an example elsewhere. –ed.]

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The example you need to study is the following: 

    #nav li a {background-image:url('sprite.gif')}
#nav li a.item1 {background-position:0px 0px}
#nav li a:hover.item1 {background-position:0px -72px}
#nav li a.item2 {background-position:0px -143px;}
#nav li a:hover.item2 {background-position:0px -215px;}

    Sprite.gif is a big image containing all the smaller images in a grid (doesn’t have to be). You then use positioning to display just that part of the sprite that contains your image.

    There are online tools that given a set of images returns a big sprite image with the coordinates of where to find the smaller images.

    • 0