help with image overlay

I posted this in another section but I dont think it was the right place.

I have designed the way i want the website to look in photoshop but I am very new to code so im not sure how to go about this.

the website is
http://unplugyourhouse.com/

the image in the top left corner is how i want the header to look. So I have a blue background (that I want to fade to the lime-ish beige color under the navigation bar) the logo itself, and the navigation bar.

How do I take my logo image and allow it to overlay the navigation bar? how do i make the header background blue, and how do i get it to fade to the limeish beige color?

Make a background image in Photoshop, say 10 pixels wide x the height of your header. Do a gradient from blue to beige, and save it as /includes/templates/your_template/images/header_bg.gif.

In your stylesheet,

#headerWrapper {background: url(../images/header_bg.gif) repeat-x;}

will set the gradient background,

#logo {margin-bottom: -15px;}

will bring the navbar up under the logo, and

#top_nav {padding-left: 250px;}

will move the navbar content to the right to clear the logo. Adjust as required.

You may also need to add
position: relative;
to the #logo rule to keep it on top of the navbar.

Thanks so much for the super quick response!

I got the navigation in the correct location now and I have created the photoshop slice. Is there something i need to write in the stylesheet to tell it to repeat the header_bg.gif?

CSS background-images automatically repeat horizontally and vertically unless you tell them not to.
The repeat-x in the code I posted tells the image to repeat horizontally only.

ah thanks!