Cutting out the middle portion of an image (example shown)?

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 m开发者_Go百科iddle portion of an image").

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.

CSS allows to move background image to any position. In order to display part of the background you need to define CSS like the following:

.button {
  background: transparent url(sprite.png) left top no-repeat;
  display: block;
  height: 40px;
  width: 160px;
}
.button:hover {
  background-position: left bottom;
}
.button:focus {
  background-position: left center;
/* or
  background-position: left -50%;
  background-position: left -40px;
*/
}

@Pixelatron; i know you accept the answer but check this example may be that's help you & easy solution as well http://jsfiddle.net/sandeep/CQmJz/

css:

a{
    text-decoration:none;
    display:inline-block;
    background:url(http://i.stack.imgur.com/gYknG.png) no-repeat 0 0;
    position:relative;
    padding:8px 0 8px 10px;
    height:17px;
}
a:after{
    content:"";
    display:block;
    background:url(http://i.stack.imgur.com/gYknG.png) no-repeat -490px 0;
    position:absolute;
    height:33px;
    width:10px;
    top:0;
    right:-10px;
}


a:hover{
    background-position:0 -34px;
}
a:hover:after{
    background-position:-490px -34px;
}

I know of no way to manipulate images like that in CSS,
I think you'll find what they do is have the top image and bottom image always top and bottom, and just fill the rest with a middle image. This can also be applied to each side, i'll add the CSS3 code, the CSS2 code should be easy to determine.

This would look like (CSS3):

.button_horizontal {
    background: url(topimage) top left no-repeat, 
                url(bottomimage) bottom left no-repeat,
                url(middleimage) top left repeat-y;

} 


.button_vertical {
    background: url(left.png) top left no-repeat, 
                url(right.png) top right no-repeat,
                url(middle.png) top left repeat-x;
}

This would look like (CSS2):

.top {
  background: url(top.png) top left no-repeat; 
  width:100%;
  height:10px;
}

.middle {
  background: url(bottom.png) bottom left no-repeat;
  width:100%;
  height:180px;
}
.button{
  background: url(middle.png) top left repeat-y;
  width:500px;
  height:200px;
}

<div class="button">
  <div class="top">&nbsp;</div>
  <div class="middle"><p>stuff goes in here :D</p></div>
</div>

That is called border-image.