What I mean is: as it is now you have your layout divided in 6 pieces:
headerleft, headercenter, headerright
contentleft, -centre, -right
Instead of those six you use 2 pieces, overlapping.
<body>
<div id="wrapper">
<div id="content"><p>bla</p></div>
</div>
</body>
Ok, now you set the left side background image om the body. that's the complete left side (now headerleft and contentleft). You set this image at 10% of the left side.
body {
background:url(bgbody.gif) 10% 0 no-repeat;
}
Then you set a second background image on the wrapper div. Remember, this wrapper div is also 100% wide (by default).
#wrapper {
background:url(bgwrapper.gif) 90% 0 no-repeat;
}
The image from the wrapper is set on the right 10% of the window, overlapping the one from the body.
There are more ways to skin this cat, but the main thing is that you can play a bit with what background-images you use. That way you don't have to insert superfluous divs (which you insert only for the design). And you can reduce the amount of images needed. Which improves the loading time of your site. And which can prevent complicated coding.
Maybe another example can carify it some more:
http://www.sportklimtraining.nl in which a repeating image is used for the container, a single image for the header (overlapping the container image), etc
Hope this makes it a bit more clear.