I am trying to add an image to the header of my website http://www.binaryopposition.com. I have the background image for the site working but I can not figure out how to get a header image to work right. It's as though my header image is being over-ridden by the body background image. All I want is the header and footer to match that of my forums. Please help.
Here is the code that I believe is relevant to what I am trying to do:
/* Body */
* {margin:0; padding:0;}
body {background:#e7e7e7 url(img/bg2.gif) top center repeat-y; color:#303030; font:76% Verdana,Tahoma,Arial,sans-serif;}
#wrap {background-color:#fff; color:#333; margin:0 auto; width:760px;}
/* Links */
a {background-color:inherit; color:#286ea0; font-weight:bold; text-decoration:none;}
a:hover {background-color:inherit; color:#286ea0; font-weight:bold; text-decoration:underline;}
a img {border:0;}
/* Header */
#header {margin:10px 0 0;}
#header h1 {background-color:inherit; color:#555; float:left; font-size:2em; letter-spacing:-1px; margin:0 0 10px; width:350px;}
#header h1 a {background-color:inherit; color:#555; text-decoration:none;}
#header p {background-color:inherit; color:#777; float:right; font-size:1.1em; font-weight:bold; line-height:1.3em; margin:6px 0 0; text-align:center; width:400px;}
#frontphoto {margin:0 0 10px;}
