How do I overlap text and graphics overtop my logo in CSS?

I have a logo that I saved as a PNG in photoshop that has asymmetrical properties here:

http://img291.imageshack.us/img291/1226/examplexh.jpg enter image description here

The trail is a part of the logo, so when I save the image, it saves it as a massive rectangle with a lot of unused space below the trail, and a bit of unused space above the guy's head.

The problem is, I would like the CSS (using dreamweaver) to look like the mockup in my image, but I can't place the text above or the table below overtop of my image.

Is there a workaround to this? Or am I going to need to save the person and the trail separately and find a way around that?

Here is the CSS I currently have:

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

The logo needs to always be slightly left of center with the table always be in the center, that's why I defined %'s.

Thanks!

Solution

It would actually be easy to include an <img> element for your logo that is positioned absolute in the top-left corner. The rest of the page would be displayed right over it.

If you want the logo to move with your page, you'll need to center a div, give it position relative, center it, and make it fixed width, with enough space to hold the table, and margins on both sides to hold the logo on the left and an empty space (for centering the table) on the right.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head>
        <title>SmartSolutions</title>
        <style type="text/css">
            #container {
                position: relative;
                width: 757px;
                margin: 0 auto;
            }
            #bluebar {
                background-color: blue;
                height: 60px;
                width: 100%;
                position: absolute;
            }
            #logo {
                background-image: 
                    url(http://img291.imageshack.us/img291/1226/examplexh.jpg);
                background-repeat: no-repeat;
                border: 1px solid green;
                position: absolute;
                width: 100%;
                height: 352px;
            }
            #page {
                z-index: 1;
                position: relative;
                width: 570px;
                margin: 0 0 0 160px;
                /* Top margin makes the whole lot move down. Padding instead */
                padding: 98px 0 0 0;
            }
            #page-contents {
                padding: 5px;
                border: 1px solid red;
                background-color: yellow;
            }
            h1 {
                visibility: hidden;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="bluebar"></div>
            <div id="logo">
                <h1>SmartSolutions</h1>
            </div>

            <div id="page">
                <div id="page-contents">
                    <h2>Page content goes here</h2>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                    Added doctype and put it through the w3 validator.
                    Sed pretium sapien porta nisi ultricies iaculis et
                    rhoncus nisl. 
                </div>
            </div>

        </div>
    </body>
</html>