title: make a header full width for browsers
body: <p>I have attached my design also to try and explain things</p>
  
  <p><img src="https://i.stack.imgur.com/5WYKp.jpg" alt="enter image description here"></p>
  
  <p>Pretty much I want the header to work like a full screen image (example: <a href="http://www.flemingsteele.com/" rel="nofollow noreferrer">http://www.flemingsteele.com/</a>) but I thought about cutting the header where the white line is on my design and have it stretch so it will fit all monitor widths. I also want the header fixed.</p>
  
  <p>I want the same to happen with my footer which is just a frosted or low opacity white bar which I want to repeat along the bottom of the page but I want it fixed to the bottom.</p>
  
  <p>The middle part I was thinking of having it as a background colour and have divs inside that area. The problem I have at the moment is whenever I add more information to either div1 or div2 it wont scroll down because ive used position:fixed . the reason for this is I want the divs to stay below the header and when I scroll down the text goes overtop of the header</p>
  
  <p>I also want it so if i add more information into either of the divs and scoll down I want have the header fixed to the top of the browser and when I scroll down all i'll see is the green coloured background, each div with the information and the fixed footer at the bottom.</p>
  
  <p>Heres the coding I have at the moment.</p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;body&gt;
    &lt;img alt="full screen background image" src="images/header.png" id="full-screen-background-image" /&gt; 
  &lt;div id="wrapper"&gt;
  
      &lt;div class="logo"&gt;&lt;img src="images/bni_logo.png" width="200" height="128" alt="BNI Logo" border="0" /&gt;&lt;/div&gt;
  
              &lt;div class="minicontainer"&gt;
  
      &lt;div class="title"&gt;&lt;/div&gt; 
  
      &lt;div id="content"&gt;
      &lt;P&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. &lt;/P&gt;
      &lt;p&gt;It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
  &lt;/div&gt;    
  &lt;/div&gt;&lt;!--MINI CONTAINER DIV!--&gt;
   &lt;/div&gt;&lt;!--WRAPPER DIV!--&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code> #wrapper                       {width:800px; height:auto; margin:0 auto}
  
  .logo                           {margin-left:100px; margin-top:20px; background-image:url(images/bni_logo.png); background-repeat: no-repeat; width:auto; height:auto;}
  #header{
      width:100%; 
      background: url(yourimage);
  }
  
  .minicontainer                  {padding-left:130px; margin-top:150px; width:800px; height:auto; position:fixed;}
  
  .title                          {background-image:url(images/title.png); width:255px; height:51px;}
  
  #content                        {width:300px; height:auto; padding-left:5px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; line-height:130%;}
  
  /* BACKGROUND IMAGE DO NOT TOUCH */
  
  
  html, body {
    height: 0%;
    width: 100%;
    padding: 0;
    margin: 0;
    background-color:#8cc643
  }
  
  #full-screen-background-image {
    z-index: -999;
    min-height: 30%;
    min-width: 1024px;
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
  }
  </code></pre>
  
  <p>Hope this is explained clearly enough</p>