What you should do is take everything from the opening to the closing “header” div and place it just after the
<body <?php body_class(); ?>>
I can’t tell you what to do exactly from there, but you will at least need to make some CSS changes. You can try wrapping it in a container div which might allow you to leave the code for the current header as is. This may also keep you from having to reposition other elements inside the header such as the Navigation Menu, search bar, or whatever you might have in the header.
If you wrap the header in a new id or class, make sure the outermost div has width:100% and no padding, or you get into doing hacks like “overflow:hidden”, or “clear:both;. You will have to play around with it a bit, but with a few good Firefox Plugin’s like FireBug, or WebDeveloper you should be able to get it figured out. Both Firefox plugins allow you to do live CSS editing on your website. You’ll just need to copy the adjusted CSS and paste it into your actual CSS file.
Another method is to place an empty div tag above or below the header. Then use CSS to place it/size it. Or, you could just “fake the header” being full width with something like this:
body {
background:transparent url(images/bg-02.jpg) 50% 0 no-repeat;
margin:0 auto;
}
html {
background:url(images/bg.jpg) 0 0 repeat-x;
}
Good Luck.