How to create a fixed header and scrolling content area

Alright, what you'll need to do here is separate the header into it's own wrapper. What I did to get this to work is to close the #wrapper div right after you close the #header div and start a new div with the same class hfeed and a new ID other than wrapper.

Should look like this:

<div class="hfeed" id="wrapper">
    <div id="header">
        <div id="logo">...
        (stuff in here)
    </div><!-- #header -->
</div>
<div class="hfeed" id="wrapper-lower">
    <div id="main">
        <div id="container">...
        (so on, so forth)

Now if you apply position:fixed to the #wrapper element, you'll get the desired effect. You will still need to change the way your graphics work to really sell the effect. I might suggest using a .png where everything under the red line of the swoosh is transparent. The file size will be much bigger, but if this is the only large image you are using, you'll be fine.

Almost forgot! You'll also need to apply a top padding to #wrapper-lower in order to push it down past the fixed element. The padding-top of #wrapper-lower should be the same as the total height of #header.