Question

This is something I’ve seen done by Grooveshark, which removes the need to use multiple images for expandable buttons and such.

Basically, an image like this

is used to produce buttons of any width smaller than the image itself. I assume this is done by somehow trimming out the middle, but I’m not sure how. I’ve looked over the CSS properties for it’s usage here but can’t seem to find out what’s done aside from a 15px padding on either side.

Does anyone know how to replicate the same effect?

Edit: Just for clarity, I’m talking about cutting out the middle of a single button (I do realize I’ve given a picture of a sprite for 4 button styles, so it might be confusing when I say “cutting out the middle portion of an image”).

Answer 1

What you’re talking about is known as the sliding doors technique. By applying the background image to a container element to show the left edge, you can then apply the same image to another element that only shows the right edge.

For example:

.menu li {
  background: url(button-sprite.png) 0 0 no-repeat;
  padding-left: 10px;
}

.menu li a {
  background: url(button-sprite.png) 100% 0 no-repeat;
  display: block;
}

The list item shows the left edge of the image. The padding allows the left edge to show when another element is laid on top.

The anchor element shows the right edge of the image, and it is cropped to the required width of the text content.