How to make a hat on the website?

Am Using Bootstrap 3.0.

Made a hat 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>
the <div>{{username}}</div>
the <div>{{password}}</div>
 </nav>


The image at the top of the cap had a picture added class headerimg. For it in the css set the following properties:

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


However, I think it's some kind of wild crutch. Plus hat "eaten up" the bottom zoom.

Have better options?
July 9th 19 at 13:58
1 answer
July 9th 19 at 14:00
https://getbootstrap.com/examples/navbar-fixed-top/

I made the 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}
If you mean the item "Brand image" that I can't figure out how to make it butt against the boundaries and not deviate from them. - paula.Ste commented on July 9th 19 at 14:03
I have only this box comes out: img.ctrlv.in/img/16/05/15/57389fd14d866.png - paula.Ste commented on July 9th 19 at 14:06

Find more questions by tags BootstrapHTML