Как сделать bcakground на весь экран?

Question

[Quartex]

Всем привет, никак не могу сделать нормальный header, хочу чтобы было на весь экран, но чтобы не делал не получается, Что можете сказать в такой ситуации? Код прикреплю, а если у кого есть какой-то пример или ссылка на header был бы рад

html:

<div id="photos-slider" class="slider-section">
		<div class="slides-container" >
			<!-- slide item 1 -->
			<div class="slide-item" >
				<img src="images/background2.jpg" alt="Slide 1" style="background-size: cover;"/>	
		</div>
		<p class="goto-next">Подробнее<a class="arrow animated ci bounce" href="#service-section" style="padding-left: 15px;"><i class="fa fa-angle-down"></i></a></p>
	</div>
</div>
	<!-- Slider Section Over-->
	
	<!-- Header Section -->
	<header id="header-section" class="header-section">
		<div class="col-md-2 col-sm-2 col-xs-6 logo-block">
			<a href="#top"><img src="images/logo.png" alt="logo"/></a>
		</div>
		<div class="col-md-10 col-sm-12 col-xs-12 menu-block">
			<nav class="navbar navbar-default primary-navigation" role="navigation">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
						<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="navbar" class="navbar-collapse collapse">
					<ul class="nav navbar-nav pull-right">
						<li><a href="#top">Главная</a></li>
						<li><a href="#service-section">Рюкзак</a></li>
						<li><a href="#our-work">Галерея</a></li>
						<li><a href="#our-genius">Характеристики</a></li>
						<li><a href="#demo">Отзывы</a></li>
						<li><a href="#project-section">Доставка</a></li>
						<li><a href="#project-section">Контакты</a></li>
					</ul>
				</div><!--/.nav-collapse -->
			</nav>
		</div>
	</header>

css:

<div id="photos-slider" class="slider-section">
		<div class="slides-container" >
			<!-- slide item 1 -->
			<div class="slide-item" >
				<img src="images/background2.jpg" alt="Slide 1" style="background-size: cover;"/>	
		</div>
		<p class="goto-next">Подробнее<a class="arrow animated ci bounce" href="#service-section" style="padding-left: 15px;"><i class="fa fa-angle-down"></i></a></p>
	</div>
</div>
	<!-- Slider Section Over-->
	
	<!-- Header Section -->
	<header id="header-section" class="header-section">
		<div class="col-md-2 col-sm-2 col-xs-6 logo-block">
			<a href="#top"><img src="images/logo.png" alt="logo"/></a>
		</div>
		<div class="col-md-10 col-sm-12 col-xs-12 menu-block">
			<nav class="navbar navbar-default primary-navigation" role="navigation">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
						<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="navbar" class="navbar-collapse collapse">
					<ul class="nav navbar-nav pull-right">
						<li><a href="#top">Главная</a></li>
						<li><a href="#service-section">Рюкзак</a></li>
						<li><a href="#our-work">Галерея</a></li>
						<li><a href="#our-genius">Характеристики</a></li>
						<li><a href="#demo">Отзывы</a></li>
						<li><a href="#project-section">Доставка</a></li>
						<li><a href="#project-section">Контакты</a></li>
					</ul>
				</div><!--/.nav-collapse -->
			</nav>
		</div>
	</header>

Comments

[Александр]

Засунь код в песочницу

[Ankhena]

но чтобы не делал не получается

Что делали и что не получается?

Вам нужно backgroung-size: cover и чтобы размеры блока были на весь экран, т.е. 100vw и 100vh.

Answer 1

[DivineDraft]

У вас в html и css - html.
Но могу предположить, что если сделать так, то что-то изменится
.slide-item img {width:100% !important;}

Answer 2

[Олег]

а где сам css?