CSS Sprites

Share this article

One of the most exciting techniques to emerge from the CSS community in recent months involves using a single large background images as a container for several smaller images, then using the CSS background position properties to show different parts of the larger image in different places (and different hover states) around a page.

To my knowledge, the first example of this trick in use was Petr Stanicek’s Fast rollovers, no preload needed demo. It has since been expanded upon by other members of the community: Dave Shea’s A List Apart article CSS Sprites: Image Slicing

Simon WillisonSimon Willison
View Author
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week