I have added a repeat-x background to the body which at the moment doesnt show because Iv also added a background to my header, can anyone shed any light on were Im going wrong?
What's going on here is that your header is defaulting to 100% width at all times and the BG color you have applied to it is picking up where the BG image stops. That BG color is hiding your body BG image.
background: <font color='Red'>#28A628</font> url(images/header.jpg) no-repeat 50% 0;
The header BG image also gets clipped when the viewport gets below 960px (the width of .wrapper) as you scroll the page left you will see where the header BG image gets clipped. That is because width 100% is the available width at any given instance.
If you set some min-max widths on your header and then use auto margins you should see the body BG image when the viewport has more width than the 1430px wide image.
Something like this:
background: url("images/header.jpg") no-repeat 50% 0; <font color='DarkGreen'>/*no BG color needed*/</font>
<font color='Blue'>min-width:960px;</font> <font color='DarkGreen'>/*.wrapper width*/</font>
<font color='Blue'> max-width:1430px;</font> <font color='DarkGreen'>/*BG image width*/
</font><font color='DarkGreen'><font color='Blue'>margin:0 auto;</font> /*center max-width*/</font>