@beduin01

Как лучше сделать шапку на сайте?

Использую Bootstrap 3.0.

Сделал шапку вот так:

<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>


Чтобы изображение в верху шапки было изображение добавил класс headerimg. Для него в css определил следующие свойства:

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


Однако мне кажется это какой-то дикий костыль. Плюс шапка "съедается" снизу при зуме.

Есть варианты лучше?
  • Вопрос задан
  • 173 просмотра
Пригласить эксперта
Ответы на вопрос 1
zoonman
@zoonman
⋆⋆⋆⋆⋆
https://getbootstrap.com/examples/navbar-fixed-top/

Я делал через псевдоэлемент. Демо.

.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}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы