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:

website header

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:

under construction

Have you tried using `border-radius` with a transparent on the image itself? — rink.attendant.6, Jul 24 '13 at 19:19
Don't know if you have Adobe products like Illustrator or Photoshop, but you can always make your image as a .png which will produce a transparency effect for anything besides the image itself. — Keith, Jul 24 '13 at 19:20
Found this while searching: http://stackoverflow.com/questions/10501488/css-3-shape-inverse-circle-or-cut-out-circle/10503105#10503105 http://jsfiddle.net/PG4pM/74/ — Andrew Clody, Jul 24 '13 at 20:07

score 1 · Answer 1 · edited Jul 24 '13 at 21:19

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;
}

Split Header CSS

1 Answers1