title: How to create a full screen div on landing page
body: <p>I am creating a website, however I would like the website to have a full screen div (Like this: <a href="http://peet.io" rel="nofollow">http://peet.io</a>)
  However I do not know what is wrong with my code, I have tried googling several times, but still no help.</p>
  
  <p>This is my code:
  <a href="http://jsfiddle.net/6p3dk2yo/" rel="nofollow">http://jsfiddle.net/6p3dk2yo/</a></p>
  
  <pre><code>.introduction {
      height: 100%;
      width: 100%;
      background: url('../images/header.jpg') no-repeat center center; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      background-position: absolute;
  }
  </code></pre>
  
  <p>That is my <code>introduction</code> css code.
  However it only show's my <code>test</code> div and not my <code>introduction</code> div which is what I need the most, is not showing, the 'test' div is making it hidden.</p>
  
  <p>If anyone knows how i can fix this then please say:)</p>