Zedric Myers

How to make a simple CSS Sprite

Est. Read Time: ~Keurig Brew-Time

If your website needs multiple image rollovers, there is a great way to help build them as a CSS sprite. A CSS sprite is one large image of multiple images that give the effect of a rollover. This takes the place of having to create multiple images for one rollover effect. The advantage of a CSS sprite is that it helps page load time, less images to maintain and doesn’t require javascript for it to function.

Simple CSS code example with the background image and position:

.item a {background: url(‘/images/sprite-example.gif’) 0px 0px}
.item a:hover {background: url(‘/images/sprite-example.gif’) 0px -30px}

CSS Sprite image example:

CSS Sprite Example

A more complex CSS sprite can be as many lines of code as needed depending on how many rollovers you have. A good example would be social icons. If they are generally all the same size and ratio, you could create a grid of the image and rollover images and assign background positions for each icon.

One Comment

  1. Posted July 30, 2012 at 1:52 am | Permalink

    Nice one Zedric! Thanks for sharing this css sprite trick :)