Как задать фоновое изображение для шапки (header) в bootstrap 3?

Здравствуйте, я изучаю bootstrap 3, я хотел верстать свой сайт параллельно с сайтом, кино монстр и мне очень нужно задать изображение для шапки сайта, но в модуле bootstrap 3 нет такого материала, я попробовал задать её с помощью html и css но ничего не вышло, пожалуйста помогите. Заранее спасибо.

bootstrap 3

4 ответов

Есть такое CSS-свойство, называется:

background-size: cover

Для любого header можно задать фоновое изображение так:

html, body {
  width: 100%;
  height: 100%;
}

header {
  width: 100%;
  height: 100%;
  background: url(https://cdn.pixabay.com/photo/2019/05/12/13/13/coffee-4198012_960_720.jpg) center center no-repeat;
  background-size: cover;
}

Для сайта КиноМонстер можно задать фоновое изображение в header так, немного изменив код:

<div class="container-fluid">
			<div class="row">
              <header>
                  <nav role="navigation" class="navbar navbar-inverse">
                      <div class="container">
                          <div class="navbar-header">
                              <div class="container">
                                  <div class="row">
                                      <div class="col-lg-12">
                                          <h1><a href="#">КиноМонстр</a></h1>
                                          <p>Кино - наша страсть!</p>
                                      </div>
                                  </div>
                              </div>
                              <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                              <span class="sr-only">Toggle navigation</span>
                              <span class="icon-bar"></span>
                              <span class="icon-bar"></span>
                              <span class="icon-bar"></span>
                              </button>
                          </div>
                          <div id="navbarCollapse" class="collapse navbar-collapse navbar-right">
                              <ul class="nav nav-pills">
                                  <li class="active"> <a href="#">Главная</a> </li>
                                  <li> <a href="#">Фильмы</a> </li>
                                  <li> <a href="#">Сериалы</a> </li>
                                  <li> <a href="#">Рейтинг фильмов</a> </li>
                                  <li> <a href="#">Контакты</a> </li>
                              </ul>
                          </div>
                      </div>
                  </nav>
               </header>
			</div>
		</div>

И в стилях так код изменить:

header {
  width: 100%;
  height: 100%;
  background: url(https://cdn.pixabay.com/photo/2019/03/11/09/53/car-4048220_960_720.jpg) center center no-repeat;
  background-size: cover;
}


header a, a:hover {
	color: #f0ad4e;
	text-decoration: none;
}

header h1 {
	letter-spacing: 15px;
	font-size: 300%;
}

header p {
	color: white !important;
	font-size: 90%;
	letter-spacing: 3px;
}

.navbar-inverse {
    padding: 1%;
    background: transparent;
    border-color: transparent;
}

Весь код будет выглядеть примерно так:

HTML:

<!DOCTYPE html>
<html lang="ru">
	<head>
		<meta charset="UTF-8">
		<title>Bootstrap Navbar</title>
		<!-- Подключаем Bootstrap CSS через CDN -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<!-- Подключаем style.css -->
		<link rel="stylesheet" href="assets/css/style.css">
	</head>
	<body>
		<div class="container-fluid">
			<div class="row">
              <header>
                  <nav role="navigation" class="navbar navbar-inverse">
                      <div class="container">
                          <div class="navbar-header">
                              <div class="container">
                                  <div class="row">
                                      <div class="col-lg-12">
                                          <h1><a href="#">КиноМонстр</a></h1>
                                          <p>Кино - наша страсть!</p>
                                      </div>
                                  </div>
                              </div>
                              <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                              <span class="sr-only">Toggle navigation</span>
                              <span class="icon-bar"></span>
                              <span class="icon-bar"></span>
                              <span class="icon-bar"></span>
                              </button>
                          </div>
                          <div id="navbarCollapse" class="collapse navbar-collapse navbar-right">
                              <ul class="nav nav-pills">
                                  <li class="active"> <a href="#">Главная</a> </li>
                                  <li> <a href="#">Фильмы</a> </li>
                                  <li> <a href="#">Сериалы</a> </li>
                                  <li> <a href="#">Рейтинг фильмов</a> </li>
                                  <li> <a href="#">Контакты</a> </li>
                              </ul>
                          </div>
                      </div>
                  </nav>
               </header>
			</div>
		</div>
		<!-- Подключаем jQuery и Bootstrap JS через CDN -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	</body>
</html>

CSS:

header {
  width: 100%;
  height: 100%;
  background: url(https://cdn.pixabay.com/photo/2019/03/11/09/53/car-4048220_960_720.jpg) center center no-repeat;
  background-size: cover;
}


header a, a:hover {
	color: #f0ad4e;
	text-decoration: none;
}

header h1 {
	letter-spacing: 15px;
	font-size: 300%;
}

header p {
	color: white !important;
	font-size: 90%;
	letter-spacing: 3px;
}


.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
    color: #fff;
    background-color: #346270;
}

.nav-pills>li>a {
	color: #fff;
}

.nav-pills>li>a:hover {
	background-color: #346270;
}


.navbar-inverse {
    padding: 1%;
    background: transparent;
    border-color: transparent;
}

@media (max-width: 767px) {
	.nav-pills>li {
		float: none;
	}

	.nav-pills {
		text-align: center;
	}

	header h1 { 
	    font-size: 280%;
	    letter-spacing: 5px;
	}

	header {
		text-align: center;
	}
}

UPD: Код немного изменил.

Успехов в обучении!

Как трогательно

Спасибо вам, вы мне очень помогли, я не думал что мне ответит сам автор этого замечательного курса, успехов вам :)