I'm having trouble getting a picture to display in the header alongside a horizontal menu. I've divided the header into two sections: img and navbar (html). The navbar is showing up correctly, but the image isn't appearing. Any suggestions on what might be wrong with my CSS? Thank you!
<div id="header">
<div id="img">
</div>
<div id="navbar">
<ul>
<li><a href="home.html">home</a></li>
<li><a href="band.html">band</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</div>
</div>
<!-- end header -->
#header{
height: 300px;
background: black;
}
#header img{
background-image: url("img/despikes-header.jpg");
background-repeat: no-repeat;
}
#navbar{
color: white;
font-size: .9em;
font-weight: normal;
font-family: Tahoma, Arial, sans-serif;
font-variant-caps: all-small-caps;
text-decoration: none;
float: left;
text-align: center;
}
#navbar ul{
height: auto;
padding-top: 8px;
padding-left: 20px;
}
#navbar li{
display: inline;
padding: 3px;
}