The Spirit Bear

Written by Gray Gilmore

I make websites for a living. I love CSS and building simple and modular stylesheets. Somewhere along the way I also turned into a Ruby developer. Life comes at you fast I guess. You can read my resume to learn about my journey so far.

You can find me as @graygilmore on several platforms:

Good ol' fashion email works, too:

You can subscribe to this blog via RSS: XML, JSON

CSS Sprites for Retina Display

While in the process of upgrading a Tumblr theme I thought, “You know what would be a good idea, let’s make an optimizing mobile version.” Being one of the first times I’ve really dug into media queries I was a little nervous. The nerves were unnecessary, it turned out to be incredibly easy!

I stumbled into a problem, though: Why are all of my icons gross and blurry? It was my good ol’ iPhone 4′s beautiful screen. It’s high resolution display caused my icons to look like poop.

Turns out fixing this problem was a simple matter of a few lines of CSS and a little bit of time in Photoshop.

// double resolution icons
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .menu .icon {
    background:url(path/to/image/menu-sprite-2x.png) no-repeat;
    background-size: 90px auto;

The key here is using the background-size property. My new high resolution sprite now measures a total of 180px wide, but we don’t want the icons to be big, we just want them to be crisp. Using the background-size method means you don’t need to adjust the background-position of any elements, neat eh?