CSS Sprites

What is a Sprite Sheet?

Put simply, a sprite sheet is an image file composed of smaller individual graphics. These graphics can be various states of a UI element, individual frames of an animation, or even various design elements that appear commonly throughout a site’s design. This practice is definitely not new – it’s been done since the early days of video games, however since being introduced to the world of web design they’ve generally been considered as good practice. There’s a lot of debate about whether or not using sprites are actually beneficial, but as with most techniques there is always a time and a place to use them. Before we get into the pros & cons let’s first review how to implement a sprite.

Adding Sprites To Your Site

Sprites are fairly straight forward to implement, it just takes a little time creating your sprite sheet and defining the CSS rules that will best suit your needs. They can be applied to various HTML elements such as lists (both ordered & unordered), divs, spans, anchor tags, and so on. As I mentioned above one way they can be used are for hover states, which is the example we’ll be exploring. Here we have a version of the sprite map used on this site which includes two states – default and hover.

social media sprite from battlehillmedia.com

Various elements of a sprite sheet

Organization is very important when creating a sprite sheet. If you use a systematic grid approach to laying out your elements it will make calculating your background-position values a bit easier later on, especially if all your elements are the same exact size as with the example above.

.sprite {
    background-repeat: no-repeat;

.facebook { background-position: 0px 0px; }
.facebook:hover, .facebook:active { background-position: -64px 0px; }

.twitter { background-position: 0px -64px; }
.twitter:hover, .twitter:active { background-position: -64px -64px; }

.instagram { background-position: 0px -128px; }
.instagram:hover, .instagram:active { background-position: -64px -128px; }


Homemade Pizza Dough Made With Yeast Starter

Disclaimer: I am an opinionated New Yorker who takes his pizza seriously. A little too seriously.


Great, now that that’s out of the way we can now get into a little bit of back-story. It was roughly two years ago, I was in the kitchen of my parents’ house when I came across some of my brother’s left over dough. I whipped up what I thought was a decent pie and sent a picture to him, feeling proud of my creation. Little did I know that his response would ignite my motivation and determination for the perfect homemade pizza, but most importantly to outdo him.

“It looks good, but mine are better.”


Speed Test

The guys over at pingdom.com have developed an invaluable tool called the “Full Page Test” for calculating some useful statistics for your website that every developer should utilize to get the best performance possible. They analyze a variety of factors such as overall load time, size, requests, caching, bad requests, and more. Take a look at how BHM tested:

website speed test

According to these results BHM is faster than 94% of the sites tested, not bad! For any section that your site may fall short in the tool also provides resources on how to fix them, and for extra measure they include detailed information on each individual request made. Head over to http://tools.pingdom.com/fpt/ to test your site, and try to beat my score!