Задал фоновое изображение через 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>
.section1__heading:before, .section1__heading:after { display: table; content: ""; clear: both; }