title: How to make header fit to the screen window?
body: <p>What I have is a header and background image to that header.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>header{
      background-image: url(/img/ffHeader.png);
      width: 100%;
      height: 0;
      padding: 0 0 15%;
      border: 1px solid;
      background-size: 100%;
      background-repeat: no-repeat;
      background-size: cover;
      margin-left: auto;
      margin-right: auto;
   }
  </code></pre>
  
  <p>With the above code, I am getting my image shrink automatically as per the window size but I am not able to get the header. It seems same what should I do that the header should also increase and decrease as per the window size. I have tried to give height 100% but it’s not working it gets my header to approx 100px.</p>
  
  <p>The header size should also be re-size as per the window size?
  How can I get this?</p>
  
  <p>I am trying to add a menu in header my code is as below</p>
  
  <pre><code>&lt;header&gt;
          &lt;button id='login'&gt;Login&lt;/button&gt;
          &lt;nav&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#home"&gt;HOME&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#myleague"&gt;MY LEAGUES&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#myscore"&gt;MY SCORES&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#leaderboard"&gt;LEADERBOARD&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#howtoplay"&gt;HOW TO PLAY&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#about"&gt;RULES&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#about"&gt;FAQ&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#about"&gt;SUPPORT&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
  &lt;/header&gt;
  
          nav ul{
              list-style: none;
          }
          nav ul li{
              margin: 0 auto;
              float: left;
              padding-top: 7%;
          }
  </code></pre>
  
  <p>The code above makes me reach to the just 5px above the end of the image, but it’s not being resized with the header. What can be the problem?</p>