Sprite Background Positioning

My sprite is 200px by 94px. I cannot figure out how to position the background and allow only the sprite area visible. I have eight icons for each line.


Can someone also point me to a page that explains about background positioning and visibility of sprites? Thanks.


Thanks to both of you for the directions and guidance. I will research more on this topic. :slight_smile:

//edit: Oops, Paul beat me to it! :stuck_out_tongue:

A List Apart has a wonderfully [URL=“http://www.alistapart.com/articles/sprites”]detailed article on how to use sprites.

Basically, your CSS background attribute is set up like this:

background:#fff url(../path/to/image.gif) left top no-repeat;
  1. You can declare a color if you need to, not necessary.
  2. set the url of the image you want to use
  3. The coordinates are set up the same way as a graph:
  4. declare your x value
  5. declare your y value
  6. e.g., background-position:5px 5px; will physically move your image down and right by 5px.
  7. e.g., background: url(image.jpg) left -6px; will physically move your image to the left edge of the image and up by 6px;
  8. e.g., background-position:center center; will display your image from the dead center of the image.
  9. Set your repeat: no-repeat, repeat, repeat-x, repeat-y

If you just want your icon visible and not the text, I suggest using something other than spans: you can’t really set height’s with them and aren’t very forgiving (personal preference). But, the code I use for allowing the background image to show through is as follows…

Say I have a 15x15 icon as the bg:

 #icon {
   background: url(myIcon.png) left top no-repeat;
   text-indent: -999999px;
   margin:1px; /*just for some extra space*/

<div id="icon">Icon</div>

Make sense?

Sorry :slight_smile: I should have waited;)


To work out the background positions for your sprites you should go back to your paint package and write down the co-ordinates for the top left of each image in the sprite.

For instance the first sprite is at 0,0 and then your second sprite is at 178,0 and your third sprite is at 0,26 and your fourth sprite is at 178,26 and so on (approx values).

Now that you know where they exist on the sprite you simply add a minus sign in front of those positive numbers to find the corresponding background position ).

background-position:0 0; /* first sprite*/
background-position:-178px 0; /* second sprite*/
background-position:0 -26px; /third sprite/
background-position:-178px -26px; /* fourth sprite*/

The element you place your sprite in must be sized in such a way so that only one part of the sprite can be seen. Therefore your small sprite can only go on elements that are less than 26px high and less than about 150px wide or otherwise the other parts of the sprite will show through because you can’t restrict the background.

Therefore you will see a lot of sprite images where the sprites are placed quite a far distance away on the sprite to allow then to be placed over elements without 2 or three sprites showing through.

Alternatively you add an extra empty element that you can use for the sprite and size it exactly to fit.

Remember that when you apply a background image to an inline element then it will have no width and height and is unlikely to show the full image. For small images you can increase padding and line-height perhaps to make it show but in practice you want to place the images on block elements (or float them) so you can control the dimensions more carefully or have vertical padding rendered correctly.

You will find more information here and there are also some links to sprite generators which will help you understand the process.