I've just started to work on http://www.textileinteriors.co.uk/
She has a lovely background image that I'd like to show through under the header area and below the footer probably around 20px deep. I thought I could style bar1 and bar2 and use border: transparent; but that doesn't work.
Any clues much appreciated!

Try this
ato->Style & configure LAYOUT->Layout Container Style
remove the background statement and the padding and change the border to

border: 20px solid #ffffff;

go to ATO->Add HTML/CSS Inserts->CSS Inserts and add

tr#bodyrow {background-color: #00ffff;}

ohh, brilliant! it only sort of worked but it gave me loads to work on which is great because I'm working on my css.
I set border to none because I don't want sides to it and I set the colour of the td to white.
I've got this in Style and Edit Header Area
<div style="width:100%;background-color:#ffffff;">%image</div> %bar1 <div style="width:100%;background-color:#ffffff;">%cat-center</div> %bar2

I'm not sure what the bars are doing but I can deal with that later.

Can I get that to work to separate out the footer as well - and probably later on to divide the sidebar out from the center area (when I put a sidebar in!)

you should change the

<div style="width:100%;background-color:#ffffff;">%image</div> %bar1 <div style="width:100%;background-color:#ffffff;">%cat-center</div> %bar2

to

<div class="my-hdr-style">%image</div> %bar1 <divclass="my-hdr-style">%cat-center</div> %bar2

then add into the CSS Inserts

.my-hdr-style {width:100%;background-color:#ffffff;}

easier to maintain/override in the future.