Still confused? Don't be. Let's jump into an example. A sprite sheet is simply a collection of smaller graphics contained within a larger file. The file itself it still an image. Any supported CSS file type (e.g. png, jpg, gif) can be used. Figure A below is a simple png file containing four smiley faces. Figure B demonstrates how the file is visually broken into a grid format. It's important that each graphic receives its own unimpeded predefined space. The black lines are for demonstration purposes only. In a real-world scenario the file from Figure A would be used.
The CSS has three important tasks. Load the entire sprite sheet, setup the position of the file, and limit the visibility of its contents. Loading the file is simple:
To move the file around, use the "top" and "left" position attributes to offset the background. These values can and will be negative.
Even though the file has been positioned, it will show everything vertically and horizontally after that position. It's important to set a height and width to guarantee only a single grid item is displayed.
This concept is similar to looking through a telescope. The larger world is limited to its smaller view. Figure C demonstrates the visual outcome to our smiley face sprite once all CSS is applied.