title: In HTML/CSS, how to use an image as the header at the very top of the page above my navigation bar?
body: <p>I'm creating a basic page that should look like Figure 1 in this link: <a href="http://www.w3.org/wiki/HTML_structural_elements" rel="nofollow">http://www.w3.org/wiki/HTML_structural_elements</a> </p>
  
  <p>The only thing is, instead of text for the heading, I want to place an image. I am trying to style the image in CSS to size and center it.</p>
  
  <p>Right under the heading I have an ul which is my navigation bar. Then I have the context which will be a couple paragraphs. Lastly I have the footer. </p>
  
  <p>My problem is, when I try to style the header, I end up having to use "background-image" and the header goes behind the navigation bar rather than the very top of the page.</p>
  
  <p>HTML BODY Example:</p>
  
  <pre><code>&lt;body&gt;
  
  &lt;div id="header"&gt;
      &lt;div id="nav"&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="content"&gt;
  
  &lt;/div&gt;
  
  &lt;div id="footer"&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>What do I have to type in CSS for the header as an image? </p>