expandable bg image with sides

Hello there,

I am trying to figure out how I can have this image into my design.
I am using the css and javascript provided by "jqueryui".

Here is the html page:

You can see that the bg image is expandable but I'm loosing the sides obviously (have not used desired image as a result).
How can I easily tell the css to achieve this expandable image with the borders.
I have had a look at the sliding door technique but I can't figure out how to effectively adapt to the given css.
Any help MUCH appreciated. Have been on it for ages.

Sorry again, did not find an option to post links or edit post...
this image
"jqueryui".

Thanks

You should be breaking this image into 3 parts: left side, middle, and right side. Then, make the middle section 1 pixel wide for the image, but use background-repeat on the CSS side.