title: How to make header take up all screen: Bootstrap
body: <p>I would like to get my header to take up the whole screen. I have tried</p>
  
  <pre><code>header {
      height: 100%
  }
  </code></pre>
  
  <p>but that didn't change anything. I can get it to work but only by changing the amount of pixels and when I go onto a different computer it doesn't work.</p>
  
  <p>Thank you anyone that can help me, if you need any more information please ask, I will be happy to provide it.</p>
  
  <p>Here you go: HTML</p>
  
  <pre><code>&lt;!-- Navigation --&gt;
  &lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
      &lt;div class="container"&gt;
          &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
          &lt;div class="navbar-header page-scroll"&gt;
              &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&gt;
                  &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;a class="navbar-brand page-scroll" href="#page-top"&gt;Webfolio&lt;/a&gt;
          &lt;/div&gt;
  
          &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
          &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
              &lt;ul class="nav navbar-nav navbar-right"&gt;
                  &lt;li&gt;
                      &lt;a class="page-scroll" href="#page-top"&gt;Home&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a class="page-scroll" href="#accessibility"&gt;Accessiblity&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a class="page-scroll" href="#usability"&gt;Usability&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a class="page-scroll" href="#graphics"&gt;Graphics&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a class="page-scroll" href="#javascript"&gt;JavaScript&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a class="page-scroll" href="#tools"&gt;Tools&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a class="page-scroll" href="#videos"&gt;Videos&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;!-- /.navbar-collapse --&gt;
      &lt;/div&gt;
      &lt;!-- /.container-fluid --&gt;
  &lt;/nav&gt;
  
  &lt;!-- Header --&gt;
  &lt;header&gt;
      &lt;div class="container"&gt;
          &lt;div class="intro-text"&gt;
              &lt;div class="intro-lead-in"&gt;My name is Ian Geer&lt;/div&gt;
              &lt;div class="email"&gt;&lt;a href="mailto:iandavidgeer@gmail.com"&gt;iandavidgeer@gmail.com&lt;/a&gt;&lt;/div&gt;
              &lt;div class="intro-heading"&gt;Web Design:&lt;a href="ingrahamhs.seattleschools.org"&gt;Ingraham&lt;/a&gt; 2016&lt;/div&gt;
              &lt;a href="#units" class="page-scroll btn btn-xl"&gt;Main Content&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>and: CSS</p>
  
  <pre><code>header {
      padding: 62px 63px;
      text-align: center;
      color: #fff;
      background-attachment: scroll;
      background-image: url(../img/seattle.jpg);
      background-position: center center;
      background-repeat: none;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      background-size: cover;
      -o-background-size: cover;
  }
  </code></pre>