Observer Monogram Luke Dorny

010 Sprites

To get right to the point, when working with sprites, you can set up your sprites in a nice grid and bump the sprite up or down, depending on the context you’re using the images for, but if you expect it to work nice and lean, forget about it.

As I have my system setup, I bump the position of the sprite background up or down depending on which icon i’d like to display, whether the article title is a story, link, chat, discussion, email address, etc.

I also have the sprite move left and right depending on it’s context on the page. If it’s an article in the sidebar, it uses a smaller icon, or perhaps if it’s hovered, then i move the sprite move over to show the red or green or grey or even white versions of the icon.
The beauty of the system, is that in most browsers, you can define the Y Position of the background image (the sprite), or the X Position for each case like so:
background-position-x: -204px;

The problem here is that Firefox doesn’t support specifying only one of the axis in this way (thanks @Murtaugh). Apparently they didn’t want to change the spec to allow this sort of thing, and the decision was made to wait until CSS4 (or so it seems, thanks @Murtaugh).

The short of it is that you’ll have to define both positions in every rule, at least if you’re aiming at supporting Firefox… for now.


  1. is that Firefox doesn't support specifying only one of the axis in this way ://
  2. @Murtaugh ://
  3. or so it seems ://
  4. @Murtaugh ://

Search flickr for

  • Commentary

  • There is one comment . Comments are closed. Move along.
  • Gravatar for Ted Goas Ted Goas :// 1

    from New Jersey left this bit 6 years, 9 months ago on 2012 07 06


    Huh, I didn’t even know that restriction existed. I use sprites all the time and as long as I keep all of the states close together in the CSS, defining both axis every time isn’t much of a problem.

    Well now I know to think twice if I decide to get cute. Thanks!

  • Add Yours:

    Commenting is not available in this channel entry.