Split Header CSS

Question

I would like some input on how to accomplish putting a website header together; the navigation background should be 100% in width, but the problem is trying to accomplish the transparency around the shape of the logo.

I am using a 960 pixel width container and I want the logo to appear on the left side, then continue on using the green navigation background. Any thoughts on how I could possibly accomplish this using CSS?

Here's the mock-up, so you can see the desired result:

I used a temporary solution for the Under Construction page, here's a snapshot of it, Maybe that will point you in the right direction:

Answer 1

Here is kind of a quick version to make this http://jsfiddle.net/fxQej/ . There is probably a quicker way but at least this one works.

HTML:

<div class="container">
    <div class="back">
        <div class="nav"></div>
    </div>
</div>

CSS:

.container {
    width:960px;
    height:500px;
    background-color:blue;
}
.nav {
    width:960px;
    height:90px;
    background-image:url('http://i43.tinypic.com/n650qq.png');
    background-repeat:no-repeat;
    background-position:70px 0px;
}
.back {
    width:960px;
    height:90px;
    background-image:url('http://i39.tinypic.com/25inc3p.png');
    background-size:960px 45px;
    background-repeat:no-repeat;
    background-position:0px 25px;
}