Styling a button using CSS and mutiple images from a spritesheet - html

Question

I have the following image in a sprite sheet and want to use it to style a button:
I have tried everything I can think of (even going as far as pseudo elements) but I can't get it to work. I had thought something like this should work:
.ui-button {
height:45px;
background-image: url(../button.png), url(../button.png), url(../media/button.png);
background-size: 8px 45px, 8px 45px, 3px 45px !important;
background-position: -63px -1px, -77px -1px, -73px -1px;
background-repeat: no-repeat, no-repeat, repeat;
}
but it doesn't. The background-size bits are the size of each chunk from the sprite sheet that I am using and the position is the top left coordinates of each part in the sprite sheet. Clearly I am doing something wrong. What?
Edit: here's the whole image:

Answer 1

Here is what I have tried with JSFiddle:
http://jsfiddle.net/Kpusc/
.ui-button {
height:45px;
width:18px;
background: url(http://i.stack.imgur.com/ipKrd.png);
background-position: -72px -1px;
background-repeat: no-repeat;
position:relative;
border:0;
}
.ui-button:before {
content:"";
display:block;
height:45px;
width:8px;
background: url(http://i.stack.imgur.com/ipKrd.png);
background-position: -64px -1px;
background-repeat: no-repeat;
position:absolute;left:0;top:0;
}
.ui-button:after {
content:"";
display:block;
height:45px;
width:8px;
background: url(http://i.stack.imgur.com/ipKrd.png);
background-position: -78px -1px;
background-repeat: no-repeat;
position:absolute;right:0;top:0;
}
​
Unfortunately I only could make it as wide as 34px. Since I can't make the center content to repeat itself.
I suppose you need to make the center part wider than at least 60px so that it could be applied as the .ui-button background-image (or perhaps make it as a separate file altogether, so it would be possible to repeat).
I'd like to know if there's another workaround though.