How does a CSS-sprite work

CSS-sprite means that many images are included in one image file. This same file is used across CSS. Using one file instead of multiple ones reduces the amount of HTTP requests and is a significant performance booster. This is done by moving the background by changing background-position, as seen below:

Here's a nifty button with a hover-state. Toggle helpers.

#button { background-position: 0px 0px; }