This is bad form. You don't want to do it this way.

If you did do it this way you'd end up with some ugly pixel mess. Plus, I don't think it's possible.

You need to split your image into 4 (or more) images.

The first image would be of a corner. We can reuse this corner for the other three corners by rotating the images with some fancy CSS.

    transform:rotate(90deg);
    -ms-transform:rotate(90deg); /* IE 9 */
    -webkit-transform:rotate(90deg); /* Safari and Chrome */

If you can't rely on rotate, then you'd unfortunately need an image for each corner.

Another image you need is a section of the horizontal portion of your border, and you'll also need one for the vertical section.

Finally, you'll want one image for the background of the `div` (a pattern that repeats).

Then you have to stitch everything together using some Frankenstein HTML and CSS.

This is a lot of work though.

If you're just using this in one or two places it may be worth it to have a predetermined size that you stick too. Otherwise, try to find a pure HTML/CSS solution that doesn't rely on images. (Something [like this](http://jsfiddle.net/jwa107/sdJEm/), unfortunately it's flat).



EDIT
----



Actually I did some more research and found an [great answer here](http://stackoverflow.com/questions/8407690/making-custom-border)


With a [wonderful JSFiddle](http://jsfiddle.net/RCHtK/)

As you can see, you will still need multiple images cut out just like I said, but the whole process of stitching together HTML and such is non-existant and everything is handled via a CSS class.