Set the background image via CSS. How to make it stick and not react to other elements and elements on it? And then I'm trying to make a margin paragraph, so the image moves with it. Tell me please. Result

@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> 

  • Added center and top. All the same, it is positioned in the same way as a paragraph. Along with him moving .. - Roman
  • add .section1__heading:before, .section1__heading:after { display: table; content: ""; clear: both; } .section1__heading:before, .section1__heading:after { display: table; content: ""; clear: both; } .section1__heading:before, .section1__heading:after { display: table; content: ""; clear: both; } - Andrew ProjectSoft

1 answer 1

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