The concept of a sprite.png is easily understood when it is seen in action.
The white square in the centre is your element, e.g. <span class="icon icon-arrow"></span>. It has a background image of, let's say: "background-image: url(ico-arrows.png);". Click on the yellow square to move the sprite and see how the CSS background-position changes.
CSS: background-position: 0 0
This project is part of my Playground - a collection of fun (and dare I say it: clever) stuff I made in the past, from jQuery games and plugins to CSS animation tricks.
Please drop in on my portfolio site www.rayhyde.nl