Stacking a large logo onto multiple CSS's

I have a basic web design that has a header, 开发者_JS百科a middle box (a big square box below the header) and a footer.

I also have a logo that occupies both the middle and the header, so I am having a difficult time figuring out how to slice my image correctly. Both the middle and header are both solid colors, but the logo is more extensive. Is there a way to CSS this style and have the logo lay on top of multiple CSS's? It isn't a square logo, so I can't just slice it up in Photoshop.

Thanks!

CSS:

* {
    margin: 0px;
    padding: 0px;
}
#wrapper {
    height: 1.1in;
    width: 100%;
    background-color: #0277bc;
    position: relative;
}
#wrapper #logo {
    position: relative;
    top: 200px;
    left: 200px;

}

Do this with position:absolute.

Assuming you have a wrapper with an id around all of your content

#wrapper {position: relative;}

Then give your logo an id and position it relative to the top left corner of the wrapper

#logo {position: absolute; top: 200px; left: 200px;}

as an example.

You might need to make your logo a png if it overlays the content of the site in any places

As an alternative answer to absolute positioning: negative margins.

if your header is 100px tall, and your logo is 150px tall, you can center the logo vertically by using:

#logo
{
  margin: -25px 0;
}

This will allow you to align the img with text-align, or have it inline with text.