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, unfortunately it's flat).

EDIT

Actually I did some more research and found an great answer here

With a wonderful JSFiddle

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.

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, unfortunately it's flat).

EDIT

Actually I did some more research and found an great answer here

With a wonderful JSFiddle

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.

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 images.

The first image will 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 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, unfortunately it's flat).

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, unfortunately it's flat).

EDIT

Actually I did some more research and found an great answer here

With a wonderful JSFiddle

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.