Background not showing up properly in header

[Bagels]

I'm trying to build a website from a chopped up photoshop file as a learning exercise. The problem I'm running into is that while everything looks fine in dreamweaver when I go into a browser everything shifts around and only a part of my back ground will appear.

Here's the HTML

   		<div id="header">
            <div id="logo"><img src="images/PI_3D_Logo.gif" width="224" height="70" alt="Premier Image Logo" /> 
            </div>
            
            
           <div id="social-media-icons">
                    <ul>
                        <li><a href="http://www.facebook.com"><img src="images/icons/facebook.png" /></a></li>
                        <li><a href="http://www.twitter.com"><img src="images/icons/twitter.png" /></a></li>
                        <li><a href="#"><img src="images/icons/rss.png" /></a></li>
                        <li><a href="#"><img src="images/icons/email.png" /></a></li>
                    </ul>
           </div>
                  <div id="topnav">
                <ul>
                    <li><a href="index.html">HOME</a></li>
                    <li><a href="contact.html">ETIMATES </a>                    </li>
                    <li><a href="contact.html">CONTACTS</a></li></ul>
            </div> 
           


                       
		</div>

and the CSS

#header					{ width:900px; height: margin: 0 auto; background:url(../images/Header.png) top no-repeat;clear:both		}	
	
#logo					{ margin: 5px 0px; float:left	}

#social-media-icons			{ float:right;  }
#social-media-icons	ul li	{ display:inline;	}
#social-media-icons ul		{ margin-top: 40px;margin-right:25px} }
		
#topnav					{ clear:both; width:900px; }
#topnav ul				{ margin: 25px 0 13px 150px; padding: 10px 0;	}
#topnav ul li			{ display:inline;	}
#topnav ul li a			{ padding: 0 20px;	}

I know it's something simple that I'm overlooking. When it renders the only part of the background that is visible is where it fits into the navigation bar

[aaronhockey_09]

Originally Posted by Bagels

I'm trying to build a website from a chopped up photoshop file as a learning exercise. The problem I'm running into is that while everything looks fine in dreamweaver when I go into a browser everything shifts around and only a part of my back ground will appear.

Here's the HTML

   		<div id="header">
            <div id="logo"><img src="images/PI_3D_Logo.gif" width="224" height="70" alt="Premier Image Logo" /> 
            </div>
            
            
           <div id="social-media-icons">
                    <ul>
                        <li><a href="http://www.facebook.com"><img src="images/icons/facebook.png" /></a></li>
                        <li><a href="http://www.twitter.com"><img src="images/icons/twitter.png" /></a></li>
                        <li><a href="#"><img src="images/icons/rss.png" /></a></li>
                        <li><a href="#"><img src="images/icons/email.png" /></a></li>
                    </ul>
           </div>
                  <div id="topnav">
                <ul>
                    <li><a href="index.html">HOME</a></li>
                    <li><a href="contact.html">ETIMATES </a>                    </li>
                    <li><a href="contact.html">CONTACTS</a></li></ul>
            </div> 
           


                       
		</div>

and the CSS

#header					{ width:900px; height: margin: 0 auto; background:url(../images/Header.png) top no-repeat;clear:both		}	
	
#logo					{ margin: 5px 0px; float:left	}

#social-media-icons			{ float:right;  }
#social-media-icons	ul li	{ display:inline;	}
#social-media-icons ul		{ margin-top: 40px;margin-right:25px} }
		
#topnav					{ clear:both; width:900px; }
#topnav ul				{ margin: 25px 0 13px 150px; padding: 10px 0;	}
#topnav ul li			{ display:inline;	}
#topnav ul li a			{ padding: 0 20px;	}

I know it's something simple that I'm overlooking. When it renders the only part of the background that is visible is where it fits into the navigation bar

You have not set the actual Height of the Header in the CSS

You have

#header					{ width:900px; height: margin: 0 auto; background:url(../images/Header.png) top no-repeat;clear:both		}

But it should look something like

#header					{ width:900px; height:100px; margin: 0 auto; background:url(../images/Header.png) top no-repeat;clear:both		}

[Bagels]

Hurf Durf, That was left in from when I had tried height before and was apparently forgetting to add the px. Thanks, I knew it had to be something like this.

[aaronhockey_09]

Originally Posted by Bagels

Hurf Durf, That was left in from when I had tried height before and was apparently forgetting to add the px. Thanks, I knew it had to be something like this.

Not a problem.
Don't forget to thank
Cheers.

[Bagels]

Reputation =/= Thank