Using this CSS in the header
<style type="text/css">
#headerlist{position:relative;}
#headerlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#headerlist li, #navlist a{height:400px;display:block;}
#headertop{left:0px;width:960px;}
#headertop{background:url('images/lcbheader.jpg') 0 0;}
</style>
and then this in the body did the trick
<ul id="headerlist">
<li id="headertop"><a href="testpage.html"></a></li>
</ul>
There's probably a more streamlined way of doing it but anyway it works...
What I couldn't understand was it worked fine when I put the css coding in the header area of each page but if I put it in the css file it didn't? I did try changing the # for . but that didn't make any difference (I've still got it sitting there with dots instead of #'s. It would make sense for it to work & would make it easier to change if there was just 1 instance in the css file rather than each page. Anyway... 2am & way past time for bed.
(a work in progress)