While none of this is recommendable (mixing markup and design), it's often not the integrator who gets the final word. However, you should still attempt to keep everything as clean as possible.
Your structure is pretty much the only kind of structure you can use to your ends, although if your width is static (300px?), I'd advise you to have your div background as one larger image repeated vertically.
You'd then have a kind of footer within your div, where you could put the two bottom corners and the bottom picture all in one single image. Instead of having 5 divs inside one, you'd only have one. Note that in bigger environment, this also means the user can download 2 more images in parallel (4 max from a single host), making the overall download of the page faster.
This obviously doesn't work if your width is relative to the parent or can change in any manner though.
EDIT: as it happens you specified the width is variable, I don't think there's a cleaner light way to do it HTML-wise.
However, if you still want to maximize the speed of download for the images, consider using sprites: the east and west side images can be put inside the same bigger image: the only thing you modify is the background position:
background-position: 32px 0px; /* this should move the background to the right */
The advantage is you only need one picture, less connections are needed to download them for the client (faster) and it takes as much place.
Hope this helps.