0

Задал фоновое изображение через CSS. Как сделать, чтобы оно прикрепилось и никак не реагировало на другие элементы и элементы на него? А то я пытаюсь сделать margin параграфу, так изображение с ним двигается. Подскажите пожалуйста. Результат

@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 {
	margin: 0 auto;
}
.section1 {
	background: url('../img/background.jpg') no-repeat center top;
	width: 1962px;
	height: 655px;
}
.section1__heading_paragraph_up {
	font-size: 22px;
	font-weight: normal;
	text-align: center;
	margin-top: 175px;
}	
.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">
			<p class="section1__heading_paragraph_up">
			Дом готов идет внутренняя отделка. Срок сдачи: Февраль 2016
			</p>
			<h1>Ваша квартира в новостройке ждет вас</h1>
			<p class="section1__heading_paragraph_down">Уютные квартиры в центре города и в 5 минутых от р. Волга</p>
		</div>
	</section>
</body>
</html>

3

1 ответ 1

0
.section1 {


    width: 1962px;
    height: 655px;
    background: url('../img/background.jpg') no-repeat center top;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.