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="#">


 <component :username.sync=username :password.sync="password" :is="topMenuView"></component>
the <div>{{username}}</div>
the <div>{{password}}</div>

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

I made the pseudo-element. Demo.

.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: - paula.Ste commented on July 9th 19 at 14:06

Find more questions by tags BootstrapHTML