How best to make a header on the site?

Question

HTML

I am using Bootstrap 3.0.
I made the header like this:

<nav class="navbar navbar-default">

          <div class="headerimg">

            <div class="container-fluid" >
              
                <div class="navbar-header" >
                  <a class="navbar-brand" href="#">
                    
                  </a>
                </div>
              
            </div>
          </div>
               <component :username.sync="username" :password.sync="password" :is="topMenuView"></component>
        <div>{{username}}</div>
        <div>{{password}}</div>
        </nav>

To make the image at the top of the header an image, I added the headerimg class. Defined the following properties for it in css:

.headerimg {
background-image: url("../img/top.jpg");
background-size: cover;
height: 160px; 
}

However, it seems to me that this is some kind of wild crutch. Plus, the cap is "eaten" from below with zoom.
Are there better options?

Answer 1

https://getbootstrap.com/examples/navbar-fixed-top/
I did it via a pseudo element. Demo .

.navbar-inverse{background-color:rgba(0,0,0,.75);border-radius:0}
.navbar .container::after{content:'';background:url(/dist/i/library-lo-res-bar.jpg);min-height:50px;display:block;position:absolute;top:0;left:0;width:100%;z-index:-1}