0

Необходимо сделать верстку с background-size: cover или 100% (то есть, фон не масштабируется и занимает всю доступную площадь). Однако фон - это композиция, и имеет значение расположение контента относительно него. Подскажите, пожалуйста, как привязать контент к фону, чтобы при уменьшении/растяжке экрана контент не "уползал" вверх/вниз. К примеру, необходимо, чтобы на облачке внизу располагалась контактная форма. Однако при уменьшении окна она и все остальное "улетает" вверх и все плывет. А хотелось бы. чтобы контент масштабировался в пределах определенной области на фоне - того же облачка, никуда с нее не "уходя".

При масштабе 100%

75%, уползло...

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:[email protected]">[email protected]</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:[email protected]">[email protected]</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>

3
  • Поделитесь кодом и мы поможем доработать. Стили и html 26 авг 2016 в 14:24
  • добавил код. Как исправить ситуацию я без понятия, тут мне скрывать нечего. Опыт пока невелик, в основном верстал резиновые макеты в несколько колонок. С таким столкнулся впервые. Даже нагуглить ничего не смог. 26 авг 2016 в 14:51
  • Код ничего не решил ). То, что Вы привели - не ресайзится и фона на горизонте не видно. Правильнее вопрос звучал бы так "как привязать фон к контенту". "Однако фон - это композиция, и имеет значение расположение контента относительно него" - для формы он имеет значение? - значит делайте обертку для формы, задавайте ей этот фон. background-size: cover; или background-size: 100%; + max-width: xx px; width: 100%; - для формы.
    – SVE
    27 авг 2016 в 9:59

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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