Center Image Inside <DIV> Block and Position Image On Top Of Other Image

Trying my first foray into using Style Sheets (instead of tables) to lay out my entire site.  I'm creating blocks of nested divs.  I can't get my first item i need to layout to work correctly.  i'm attaching a picture and my code.  I need to align my logo in the center relative to the "header".  then the logo needs to float on top of the header image.

also, if you notice anything that i could be architecting wrong (in terms of the CSS) that will come back to bite me, please let me know.

I'm also going to attach the 2 images so you can have them at your disposal
Styles.css file
* {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	border: 0;
body {
	margin: 0 auto;
	width: 817px;
	min-width: 817px;
	background: #5b5248;
	display: block;
	position: relative;
	height: 658px;
	width: 817px;
	margin: 0 auto;
#container .header {
  position: relative;
#header .logo {
  position: relative;
  margin: 0 auto;
  display: block;
    <html xmlns="">
    <head runat="server">
        <link rel="stylesheet" media="screen" href="Styles.css" type="text/css" />
        <form id="form1" runat="server">
        <div id="container">
            <div id="header"><img src="Images/BarTop.gif" />
                <div id="logo"><img src="Images/LogoInfinity.gif" /></div>

Open in new window

Who is Participating?
David S.Commented:
You should make BarTop.gif be the background image for #header.

You don't seem to have any "logo" or "header" classes but both are IDs.
#header {
  background-image: url(Images/BarTop.gif);
  background-repeat: no-repeat;

Open in new window

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.