I have a background tile for the #header space and one for the #middle space. I want to create a bit of separation between the two so that the body's background image is visible. I've tried adding padding and margin to both but all those do is extend the respective space with the background tile (i.e. adding padding/margin to #header simply extends the #header background tile rather than create a blank space). Is there a CSS way to do this?

what you need to do is set the #header to transparent, set each of the sections in the header to the background color you want then set the bar2 to the width you want and also to transparent

Ah, thought so. I was hoping for a way around that since %page-center's background doesn't match the layout width. Oh well. Some CSS hacks will make this work.