复杂的按钮精灵

Question

I have this sprite:

Link http://gpanel.darrell.nl/images/derma.png

And in the right upper corner there are 4 button images. I like to use the buttons like that the corners stay intact but that the rest can be stretched. I searched the whole internet but couldn't find a thing. How can I make this possible with CSS?

The same for the windows frame upper left.

Answer 1

Unfortunately border-image doesn't work well with sprites, It can be done, but requires an extra element and some not-very-elegant tricks, here's a demo: http://jsfiddle.net/sandro_paganotti/H2xgQ/1/

.border{
    border-right: 400px solid black; 
    border-bottom: 400px solid black;
    border-image: url('http://gpanel.darrell.nl/images/derma.png') 3 388 388 3 fill stretch stretch;
    height: 300px;
    width: 200px;
}