If you want to use sprite image, you have to split up the html in separate div's to display the corners and borders separately. This is because using sprites, you have to let the size and and form of the html element define which part of the image sprite will be shown, along with a background offset. For your example, this would be a mess as you would need to define 9 div's to get all the parts in place, and will really be similar to the term "table layout" (and in this case probably the easiest to implement as table) which is not recommended in modern web design.

The solution referenced in Johannes' edited answer using multiple backgrounds on a div will be better, although for this to work, you must split up your image to separate images for the different components (4 corners, 2 sides, and 1 content background). Even with the need to split up your image, this is the right way to do it, because the styling will be done in css, and not in html.

If you want to use sprite image, you have to split up the html in separate div's to display the corners and borders separately. This is because using sprites, you have to let the size and and form of the html element define which part of the image sprite will be shown, along with a background offset. For your example, this would be a mess as you would need to define 9 div's to get all the parts in place, and will really be similar to the term "table layout" (and in this case probably the easiest to implement as table) which is not recommended in modern web design.

The solution referenced in Johannes' edited answer using multiple backgrounds on a div will be better, although for this to work, you must split up your image to separate images for the different components (4 corners, 2 sides, and 1 content background). Even with the need to split up your image, this is the right way to do it, because the styling will be done in css, and not in html.