How does a sprite work?

A demo to explain the concept to someone new to frontend

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