I have a header at the top of each page that looks like this: 

```
<header>
<div class="jumbotron" style="position: fixed; z-index: 3; background-color: #222222; width: 100%; height: 10%">
    <h2 style="color: white; text-align: center">
        <img src="Images/BluePuz.png" class="blue" style="position: static">CHECKERED FLAGS
        <img src="Images/YellowPuzz.png" class="yellow" style="position: static">
    </h2>
</div>

```

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: 

[Regular browser height](https://i.stack.imgur.com/D6Tg0.png)
[shrunk browser height (mobile in landscape mode)](https://i.stack.imgur.com/2tVhO.png)