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

  • sylozof

    French readers, you can get a translation of the article “CSS Sprites” at this address :
    Other french translations of useful articles can be found at


    All these cool CSS stuff are making me want to start another site.

Related books & courses
Available now on SitePoint Premium

Preview for $1