Day eight of my pairing tour took me to a client site to pair with one of 8th Light’s design craftsman, Chris Peak. The 8th Light team he’s working with just finished a major milestone for the client so Chris had a list of housekeeping tasks to tackle. We started off writing a little CoffeeScript and Jasmine specs, made some tweaks to the database config, and wrapped the day working with Image sprites in CSS.

There wasn’t much to report on regarding the CoffeScript or database config tweaks— however, the sprite stuff was really cool and it was great to watch Chris quickly flip between Photoshop and his CSS file to get the icons just right.

Like many people, my introduction to sprites was primarily through Twitter Bootstrap. By just attaching a class name like class = “icon-home” to an element a cool little pre-made “home” icon would show up. I knew that all of these icons came from one single image sheet but had never dug into the “magic” behind them.

Well, as it turns out there really isn’t that much magic, it’s just a clever use of the width, height, background-image and background-position attributes.

Here’s a look at the relevant attributes from inspecting the elements of the icons page in Twitter’s own Bootstrap guide:

.icon-home {
    background-position: 0 −24px;
    background-image: (“../img/glyphicons-halflings.png”);
    width: 14px;
    height: 14px;
}

The first two lines of this block include the png file that has all of the icons (as seen here) and then positions it accordingly. By positioning it −24 pixels along y-axis it shifts the focus of the image down the “sheet” of images. Since the home-icon is positioned all the way to the left there is no adjustment necessary for the x-axis. The width and height attributes are simply the constraints that they want to put on the background image. The home-icon is only 14 pixels x 14 pixels so that is all that they need to include.

An easy way to experiment with sprites in “real-time” is to head over to the aforementioned Twitter Bootstrap icon section, right click on an icon to inspect it, and then start playing around with the CSS attributes to see how each adjustment affects the image. Happy sprit-ing.