CSS Sprites


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

Free JavaScript: Novice to Ninja Sample

Get a free 32-page chapter of JavaScript: Novice to Ninja and receive updates on exclusive offers from SitePoint.

  • sylozof

    French readers, you can get a translation of the article “CSS Sprites” at this address : http://pompage.net/pompe/sprites/
    Other french translations of useful articles can be found at http://pompage.net/pompe/

  • http://www.madproject.com madproject.com

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