OK, the way around that (as you guessed) is to take the header out of the main wrapper and let it stretch to 100% width (which it will do naturally anyhow) and place the cloud image on that as a background. THEN ... create a div inside that with a width of 70% (like the wrapper) and center it with margin: 0 auto; (like the wrapper). Inside that you put your logo etc, just as you put other content inside your wrapper. That will save you having to put nasty margins on the logo etc. which don't work properly anyway (as you'll see if you scale the width of the browser).
So, anything that needs to be centered should be in a centered div, and if you need a backgrond image that stretches the full width of the browser, wrap another div around that (which will be 100% width) and put the image on that as a background. Don't put decorative images in the HTML itself.