I am having some trouble working out how to convert my site that I am currently designing into html and css. I know my way around the 2 languages fairly well but I am stuck as to how to get the result that I want!
There are probably a dozen different ways to do what you're asking, and each way has its merits, depending on how the rest of your design is going to shake out.
If we *only* look at what you have now, and not put any thought into any other elements that may end up being placed in the header area, the path of least resistance is to create a a div with a set height and a blue background (making it the height that it is within your layout, export your logo with the white area as part of the image and transparency around it (trans PNG is probably best - no need to deal with artifacts from GIF matte). Then simply drop the image into the div in your HTML, center it with CSS and add top margin to push it out of the container in which it is sitting.
The upside is that you'll end up writing two lines of code total. The downside is this method will pretty much prevent ANYTHING else from being placed inside that header area or the white space to either side of the bottom half of the logo. Not full prevention, but annoying enough that you'll wonder why you ever coded it that way.
The moral of the story is that you're going to end up hurting yourself by coding a partially formed layout, only to find the technique you used doesn't match with the future development of the layout. Finish your canvas, then look for how to code it best!
Some designers like to design using a browser as they go. In my experience, this is a good way to waste a whole lot of time undoing damage done through ill-executed coding techniques. Why limit your creativity by coding a half-finished layout?