title: How do i add a background image to my header?
body: <p>Hi does anyone know how to add a background image to the area of the header behind the navigation and other images as mine currently seems to stop expanding once it reaches another image within the header tag?</p>
  
  <p>Thanks Adam :)</p>
  
  <p><a href="http://jsfiddle.net/Binnsey/3xaq2mqn/" rel="nofollow">http://jsfiddle.net/Binnsey/3xaq2mqn/</a></p>
  
  <p>I'm assuming i messed up somewhere simple but I can't seem to work it out :/</p>
  
  <p>HTML
      
       
          
              
               My Green Energy Home Page 
              http://fonts.googleapis.com/css?family=Signika:400,600'>
              http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
              
              
              
              
          
      
      
          
          
           My Green Energy</p>
  
  <pre><code>&lt;nav&gt;
      &lt;label for="show-menu" class="show-menu"&gt;Show Menu&lt;/label&gt;
      &lt;input type="checkbox" id="show-menu" role="button"&gt;
      &lt;ul id="menu"&gt;
          &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;My Metre&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Customer Help&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Social Media&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>CSS </p>
  
  <pre><code>body{
      max-width: 1200px;
      margin: 0 auto;
      width: 70%;
      clear: both;
      height: 100%;
      background-color: #DCDCDC;
      padding-top: 30px ; 
      margin: 0 auto;
      padding-top: 30px ; 
      font-family: 'PT Sans', sans-serif;
      font-size: 100%;
      text-align: left;
      line-height: 1.5;
      padding: 2%;
      border-radius: 10px;
      box-shadow: #0AF73A 0px 0px 50px;}
  
  .header {
      width: 100%;
      background-image:url("images/webheader.jpg");
  }
  
  .MainHeader {
      background-color: #71B315;
      background: url (images/webheader.jpg);
      /* clearfix */
      overflow: auto;
      margin-top: 2% 0;}
  
  .MainHeader nav {
      background-color: #2f3036;
      height: 60px;
      border-radius: 5px;
      margin-right: 10px;
      margin-left: 10px;
      border-radius: 5px;
      -webkit-border-radius: 5px;}
  
  .content {
      margin-bottom: 2%}
  
  .MainHeader {margin-bottom: 2%;}
  
  .MainHeader img {
      width: 20%; 
      height: auto;}
  
  .MainHeader {
      padding-top: 20px;
      padding-bottom: 10px;}
  
  .headertext {
      display: inline;}
  
  .logo {
      display: inline;
      vertical-align:middle}
  
  #menu .MainHeader nav a:hover, .MainHeader nav a:active
  #menu .MainHeader nav .active a:link, .Mainheader nav .active a:visited {
      background-color: ;
      text-shadow: none;}
  
  .MainHeader nav ul li a {
      border-radius: 5px;
      -webkit-border-radius: 5px;}
  </code></pre>