Сделать фоновое изображение по центру и на весь экран

274
04 сентября 2018, 14:10

Как сделать фоновое изображение по центру и на весь экран??? И чтобы контент был посередине, как у хедера? Сначала у меня получись это сделать, но изображение двигалось вместе с контентом.. Так не надо. Нужно чтобы изображение было по центру и на весь экран. Нужно чтобы контент был по центру, как у хедера.. Как это реализовать? Макет прикрепляю. 

@font-face { 
  font-family: 'Roboto Slab'; 
  src: url('../fonts/RobotoSlabBold.eot'); /* IE9 Compat Modes */ 
  src: url('../fonts/RobotoSlabBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
       url('../fonts/RobotoSlabBold.woff2') format('woff2'), /* Super Modern Browsers */ 
       url('../fonts/RobotoSlabBold.woff') format('woff'), /* Pretty Modern Browsers */ 
       url('../fonts/RobotoSlabBold.ttf')  format('truetype'), /* Safari, Android, iOS */ 
       url('../fonts/RobotoSlabBold.svg#svgFontName') format('svg'); /* Legacy iOS */ 
} 
body { 
	padding: 0; 
	margin: 0; 
	font-family: 'Roboto Slab'; 
	font-size: 15px; 
	font-weight: normal; 
	width: 100%; 
} 
					/* Header*/ 
header { 
	width: 1350px; 
	height: 100px; 
	margin: 0px auto; 
} 
header li { 
	display: inline-block; 
	margin-top: 20px; 
 
} 
header a { 
	text-decoration: none; 
} 
.header__feedback { 
	float: right; 
	width: 200px; 
	height: 80px; 
	font-size: 21px; 
	font-weight: bold; 
	margin-top: 10px; 
} 
.header__logo { 
	display: inline-block; 
	float: left; 
	margin-top: 10px; 
} 
.header__menu_list { 
	display: inline-block; 
} 
.header__feedback_icon img { 
	width: 20px; 
	float: left; 
	margin-top: 9px; 
	margin-left: 4px; 
} 
.header__feedback_items { 
	font-size: 14px; 
	width: 156px; 
	height: 38px; 
	border: 1px solid #2f1059; 
	border-radius: 5px; 
	line-height: 38px; 
	margin-top: 8px; 
	margin-left: 25px; 
} 
.header__feedback_button a { 
	font-size: 14px; 
	font-weight: bold; 
} 
.header__feedback_number { 
	color: #2f1059; 
} 
.header__menu_list_item1 { 
	margin-left: 50px; 
} 
.header__menu_list_item2, 
.header__menu_list_item3, 
.header__menu_list_item4, 
.header__menu_list_item5 { 
	margin-left: 20px; 
} 
					/* Header END*/ 
					/* Section1*/ 
section { 
	width: 1350px; 
	height: 655px; 
	margin: 0 auto; 
} 
.section1 { 
	background: url('../img/background.jpg') no-repeat center top scroll; 
	min-height: 655px; 
} 
.section1__heading_paragraph_up { 
	font-size: 22px; 
	font-weight: normal; 
}	 
.section1__heading h1 { 
	font-size: 43px; 
	font-weight: bold; 
}
<!DOCTYPE html> 
<html lang="ru"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Тренировка</title> 
	<link rel="stylesheet" href="css/style.css"> 
</head> 
<body> 
	<header> 
		<nav> 
			<div class="header__logo"> 
				<img src="img/logo2.png" alt="Logo"> 
			</div> 
			<div class="header__menu_list"> 
				<ul> 
					<li class="header__menu_list_item1"><a href="#">Инфраструктура</a></li> 
					<li class="header__menu_list_item2"><a href="#">Планировки и цены</a></li> 
					<li class="header__menu_list_item3"><a href="#">Материалы и отделка</a></li> 
					<li class="header__menu_list_item4"><a href="#">Документы</a></li> 
					<li class="header__menu_list_item5"><a href="#">Контакты</a></li> 
				</ul> 
			</div> 
			<div class="header__feedback"> 
				<div class="header__feedback_number"> 
					+ 7 (495) 544-23-12 
				</div> 
				<div class="header__feedback_items"> 
						<div class="header__feedback_icon"> 
								<img src="img/icon_phone.png" alt="icon"> 
						</div> 
						<div class="header__feedback_button">	 
								<a href="#">Заказать звонок</a> 
						</div> 
				</div> 
			</div> 
		</nav> 
	</header> 
	<section class="section1"> 
		<div class="section1__heading"> 
			<div class="section1__heading_paragraph_up"> 
			Дом готов идет внутренняя отделка. Срок сдачи: Февраль 2016 
			</div> 
			<h1>Ваша квартира в новостройке ждет вас</h1> 
			<p class="section1__heading_paragraph_down">Уютные квартиры в центре города и в 5 минутых от р. Волга</p> 
		</div> 
	</section> 
</body> 
</html>

Answer 1

У тебя изображение лежит фоном на блоке фиксированной ширины (section), чтобы оно было на всю ширину тебе нужно блок растянуть на всю ширину экрана.

Если тебе нужно картинку сделать на всю ширину экрана, а текст в нем ограничить шириной 1350px сделай ещё один вложенный блок, section будет на всю ширину экрана, а вложенный в него блок будет шириной 1350px по центру.

READ ALSO
Появляется outline при наведении.
CSS

Появляется outline при наведении.

Появилась странная проблема -- в хэдере при наведении на объекты появляется белый outlineЯ нигде не писал outline, но и если написать *{ outline: none; }, то всё...

 223
Когда нужно использовать `{` в операторе `if`? [дубликат]
javascript

Когда нужно использовать `{` в операторе `if`? [дубликат]

На данный вопрос уже ответили:

 234
Не работает React Slick, сделал npm install react-slick и npm install slick-carousel
javascript

Не работает React Slick, сделал npm install react-slick и npm install slick-carousel

Взял код из Example в репозитории react-slick гитхаба, но он отказывается работать, появляются точки и дикий горизонтальный скроллПРоект был создан...

 252
Отключение и включение кнопки
javascript

Отключение и включение кнопки

Изначально кнопка заблокирована

 229