It is necessary to make a layout with background-size: cover or 100% (that is, the background does not scale and occupies the entire available area). However, the background is a composition, and the content is relative to it. Tell me, please, how to bind content to the background, so that when you decrease / stretch the screen, the content does not “crawl” up / down. For example, it is necessary that the contact form is located on the cloud below. However, when the window is reduced, it and everything else "flies" up and everything floats. And I would like to. so that the content is scaled within a certain area against the background of the same cloud, without leaving it anywhere.
body { background: url(images/rocks.png) no-repeat, url(images/footer.png) no-repeat, url(images/form.png) no-repeat, url(images/stars_big.png) no-repeat, url(images/rocket.png) no-repeat, url(images/meteors.png) no-repeat, url(images/spaceman.png) no-repeat, url(images/background.png) no-repeat; background-size: 100%; margin: 0 auto; border: 0; } @font-face { font-family: 'Tr2n'; src: url(fonts/Tr2n.ttf); } @font-face { font-family: 'Rotonda bold'; src: url(fonts/Rotonda_bold.ttf); } a { text-decoration: none; } .info a:visited, a:link { color: #abd2e1; } h1, .menu, .info, .contact { position: absolute; } h1 { font-family: 'Tr2n'; color: #108ecf; font-size: 6.2rem; font-weight: bold; letter-spacing: 0.1em; left: 28rem; top: 25rem; } ul { list-style-type: none; } .menu { font-family: 'Rotonda bold'; color: #fe5721; font-size: 1.3rem; } .menu-lang { left: 70rem; top: 2.5rem; } .menu-nav { left: 34rem; top: 40rem; } .menu a { color: #fe5721; } .menu li { display: inline-block; letter-spacing: 0.1em; } .menu-lang li { padding-left: 0.8rem; } .menu-nav li { padding-left: 2.7rem; } .menu a:hover { color: #abd2e1; } .info { font-family: 'Open Sans', sans-serif; color: #abd2e1; } .info-top { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-width: 20rem; -moz-column-width: 20rem; column-width: 20rem; -webkit-column-gap: 0.9rem; -moz-column-gap: 0.9rem; column-gap: 0.9rem; width: 50rem; left: 37rem; top: 49rem; font-size: 1.1rem; } .info a:hover { color: #fe5721; } .info-top li { letter-spacing: 0.1em; line-height: 2.2rem; } .contact { left: 46rem; top: 70rem; } .contact input[type='text'], .contact input[type='email'], #msg { width: 17rem; height: 2.5rem; border-radius: 5px; font-family: 'Open Sans', sans-serif; font-size: 0.9rem; color: #9b9b9b; background-color: #e9e9e9; border: 1px black solid; } .contact li { padding-bottom: 1rem; } #msg { height: 9rem; } #address, #map, #phones { display: inline-block; float: left; } #address, #phones { margin-left: 8rem; } .contact input[type='submit'] { margin-left: 10rem; border-radius: 10px; color: #f1f1f1; background-color: red; width: 7rem; height: 2rem; font-family: 'Rotonda bold' } input::-webkit-input-placeholder { text-indent: 1rem; } .info-bottom { left: 28rem; top: 100rem; width: 70rem; font-size: 1.1rem; letter-spacing: 0.1em; line-height: 1.7rem; } #links { position: absolute; top: 110rem; left: 52rem; margin-bottom: 14rem; } <!DOCTYPE html> <html lang='ru'> <head> <title> Most Playland </title> <meta name="viewport" content="width=device-width, initial-scale=1.5"> <meta property="og:title" content="Most Playland"> <meta charset='utf-8'> <link rel="stylesheet" type="text/css" href="styles.css"> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> </head> <body> <ul class='menu menu-lang'> <li><a href="#"> UA </a></li> <li><a href="#"> RU </a></li> <li><a href="#"> EN </a></li> </ul> <header> <a href="main.html"><h1> MOST PLAYLAND </h1></a> </header> <nav> <ul class='menu menu-nav'> <li><a href="#"> О нас </a></li> <li> <a href="#">Афиша </a></li> <li><a href="#"> Развлечения</a> </li> <li><a href="#"> Акции </a></li> <li><a href="#"> Контакты </a></li> </ul> </nav> <section class='info info-top'> <ul> <li>г. Днепропетровск </li> <li>ул. Глинки, 2, </li> <li>ТРЦ "Мост-Сити центр", </li> <li>2-й уровень </li> <li>ежедневно с 10:00 - 22:00 </li> </ul> <ul> <li><a href="tel:+380977949426">097-794-94-26,</a> </li> <li><a href="tel:+380667949426">066-794-94-26,</a></li> <li><a href="tel:+380567320017">056-732-00-17 </a></li> <li><a href="mailto:most.playland@mail.ru">most.playland@mail.ru</a> </li> </ul> </section> <form class='contact'> <ul> <li><input type='text' placeholder='Имя'> </li> <li><input type='email' placeholder='E-mail'> </li> <li><input type='text' placeholder='Сообщение' id='msg'> </li> <li><input type='submit' value='Отправить'> </li> </ul> </form> <footer class='info info-bottom'> <ul id='map'> <li> <a href="#">О нас</a> </li> <li><a href="#">Афиша</a> </li> <li><a href="#">Развлечения </a></li> <li><a href="#">Акции </a></li> <li><a href="#">Контакты </a></li> </ul> <ul id='address'> <li>г. Днепропетровск </li> <li>ул. Глинки, 2, </li> <li>ТРЦ "Мост-Сити центр", </li> <li>2-й уровень </li> </ul> <ul id='phones'> <li><a href="tel:+380977949426">097-794-94-26,</a> </li> <li><a href="tel:+380667949426">066-794-94-26,</a> </li> <li><a href="tel:+380567320017">056-732-00-17 </a></li> <li><a href="mailto:most.playland@mail.ru">most.playland@mail.ru</a></li> </ul> </footer> <div id='links'> <img src="images/face.png" alt='facebook'> <img src="images/inst.png" alt='instagram'> <img src="images/yout.png" alt='youtube'> </div> </body> </html> 