title: How do I make the background stretch the browser height?
body: <p>Essentially, I'm looking for a full browser height landing page. However it seems that the background is applied only for the height of the content. I styled the parent container to have 100% browser height.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#header {
    position: relative;
    background: #202020;
    background-size: cover;
    height: 100%;
    width: 100%;
    color: white;
    text-align: center;
  }
  #header .content {
    position: relative;
    top: 50%;
  }
  #header p {
    margin: 0;
    padding: 20px;
  }
  #header .name {
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    word-spacing: 12px;
    font-size: 40px;
    letter-spacing: 2px;
  }
  #header .tagline {
    font-family: 'Lato', sans-serif;
    font-weight: lighter;
    opacity: 0.7;
    padding-top: 30px;
    word-spacing: 2px;
    font-size: 20px;
    margin-top: -30px;
  }
  #header .icons {
    margin-left: auto;
    margin-right: auto;
  }
  #header .icons i {
    padding-right: 20px;
  }
  #header .icons a {
    color: #ffffff;
    opacity: 0.3;
    -webkit-transition: opacity 0.3s;
    text-decoration: none;
    cursor: pointer;
  }
  #header .icons a:hover {
    opacity: 4;
  }
  #header .scroll {
    position: absolute;
    color: #ffffff;
    display: inline;
    bottom: 36px;
    opacity: .3;
    -webkit-transition: opacity 0.3s;
  }
  #header .scroll:hover {
    opacity: 0.9;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section id="header"&gt;
    &lt;div class="content"&gt;
      &lt;p class="name"&gt;Text Name&lt;/p&gt;
      &lt;p class="tagline"&gt;Some blurb goes here&lt;/p&gt;
      &lt;div class="icons"&gt;
        &lt;a href="http://www.github.com/"&gt;
          &lt;i class="fa fa-github-alt fa-lg"&gt;&lt;/i&gt;
        &lt;/a&gt;
        &lt;a href="http://www.twitter.com/"&gt;
          &lt;i class="fa fa-twitter fa-lg"&gt;&lt;/i&gt;
        &lt;/a&gt;
        &lt;a href="mailto:test"&gt;
          &lt;i class="fa fa-paper-plane fa-lg"&gt;&lt;/i&gt;
        &lt;/a&gt;
        &lt;a href="http://www.linkedin.com/"&gt;
          &lt;i class="fa fa-linkedin fa-lg"&gt;&lt;/i&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;a class="scroll" href="#"&gt;
      &lt;i class="fa fa-chevron-down fa-lg"&gt;&lt;/i&gt;
    &lt;/a&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>