title: Image under nav bar HTML CSS
body: <p>This site <a href="http://www.vergecollective.com/" rel="nofollow">here</a> has an image under the navbar and it autoresponds to the dimensions of your browser. I would like to know:</p>
  
  <ol>
  <li><p>How to get an image to look exactly like the one under the navbar. (I have an image I want to use I just don't how to get it into my site under the navbar)</p></li>
  <li><p>How to get it to auto respond like their's does</p></li>
  <li><p>How to make it so I can still add content to the page after that image in the banner area. Now I have it as the body background in CSS and that makes it so you can't add any content and be able to scroll.</p></li>
  </ol>
  
  <p>Here is my code that I have now:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
      &lt;title&gt;Vector Games&lt;/title&gt;
      &lt;meta charset="utf-8"/&gt;
      &lt;link rel="shortcut icon" href="favicon.png" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="homecss.css"&gt;
      &lt;head&gt;
  
      &lt;body&gt;
          &lt;div class="header"&gt;
  
              &lt;div class="container"&gt;
  
              &lt;div class="logo"&gt;
                  &lt;h1&gt;&lt;a href="#"&gt;VectorGames&lt;/h1&gt;
              &lt;/div&gt;
  
              &lt;div class="nav"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Arcade&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Puzzle&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Strategy&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
             &lt;/div&gt;
         &lt;/div&gt;
     &lt;/div&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The CSS: </p>
  
  <pre><code>@charset "utf-8";
  body{
      background-image: url("banner.png");
      width:100%;
  }
  
  .container{
      width: 1200px;
      margin: 0 auto;
  }
  
  .header{
      background: gray;
      width:100%;
      top: 0;
      position:fixed;
  }
  
  .logo{
      float:left;
      margin-left: -250px;
      font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
  }
  
  a{
      text-decoration:none;
      color: white;
  }
  
  li{
      list-style: none;
      font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
      float: left;
      margin-left: 15px;
      padding-top: 20px;
      font-size:20px;
  }
  
  .nav{
      float:right;
  }
  </code></pre>