Header Vs. Logo and content scrolling issues

Here is the website I am building for a client: http://www.mytributejournal.com/

I want the header (All the text - and Pen) and the nav bar to be fixed at the top of the page (as they are currently). I want the content to scroll under the nav bar and header... which they do... kind of.

If you play with the width of your browser window you will see that while the header (note: NOT LOGO) image resizes with the window, the nav bar stays fixed... and thus in a smaller window the content will RE-APPEAR between the nav bar and header when scrolling.

Current Settings:
Logo - a Transparent block 10x116
Background Header Image - The Text and Pen on the brown background

What I have Tried and results:
Logo - Text and pen on Brown Background
Background Header Image - none
Result - Header image is squeezed into the 960px Container - as you can see with the swirls - this does not work as it cuts the swirls off mid swirl - IF I COULD MAKE THE LOGO GO FLUID FULL WIDTH THIS WOULD PROBABLY SOLVE MY PROBLEM!!!

Logo - Text and Pen on Transparent Background
Background Header Image - none
Result: Content scrolls underneath header but since background is transparent you still see the content behind the image

Logo - None
Background Header Image - The Text and Pen on the brown background
Results - Nav bar jumps to the top of the screen - content scrolls over image.

Any Help Greatly Appreciated!