title: bootstrap header background error
body: <p>I have a header at the top of each page that looks like this: </p>
  
  <pre><code>&lt;header&gt;
  &lt;div class="jumbotron" style="position: fixed; z-index: 3; background-color: #222222; width: 100%; height: 10%"&gt;
      &lt;h2 style="color: white; text-align: center"&gt;
          &lt;img src="Images/BluePuz.png" class="blue" style="position: static"&gt;CHECKERED FLAGS
          &lt;img src="Images/YellowPuzz.png" class="yellow" style="position: static"&gt;
      &lt;/h2&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>I noticed however, when you shrink the height of the desktop browser, the background "shrinks". How could I set it up so that the background bar is always the same height? I have screenshots to illustrate what is happening: </p>
  
  <p><a href="https://i.stack.imgur.com/D6Tg0.png" rel="nofollow noreferrer">Regular browser height</a>
  <a href="https://i.stack.imgur.com/2tVhO.png" rel="nofollow noreferrer">shrunk browser height (mobile in landscape mode)</a></p>