Фуллскрин картинка на заднем фоне

Question

Хотел сделать картинку на заднем фоне, но она работает не так, как хотелось бы. При увеличении масштаба картинка остаётся такой же, а всё остальное увеличивается, а хотелось бы, чтобы она также масштабировалась. Я думаю, что скорее всего это из-за свойства background-size: cover;, но если его убрать, то картинка просто не помещается на странице.

100% масштаб:

300% масштаб:

/* обнуляем стили */
* {margin: 0; padding: 0; border: 0;}
*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
:focus,:active {outline: none;}
a:focus, a:active {outline: none;}
nav, footer, header, aside {display: block;}
html, body {height: 100%; width: 100%; font-size: 100%; line-height: 1; font-size: 14px; -ms-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}
input, button, textarea {font-family: inherit;}
input::-ms-clear {display:block;} /* для IE none, чтобы убрать крестик */
button {cursor: pointer;}
button::-moz-focus-inner {padding: 0; border: 0;}
a, a:visited {text-decoration: none;}
a:hover {text-decoration: none;}
ul li {list-style: none;}
img {vertical-align: top;}
h1, h2, h3, h4, h5, h6 {font-size: inherit; font-weight: 400;}
/*=================================================================*/

body {
	font-family: 'Open Sans', sans-serif;
	max-width: 1857px;
	margin: 0 auto;
}

.hi {
	min-height: 100vh;
	background: url(https://fanparty.ru/fanclubs/space-and-ufo/gallery/1111806_space_and_ufo.jpg) top center no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Pex</title>
	<link rel="stylesheet" href="css/style.css">
	<link href="https://fonts.googleapis.com/css?family=Merriweather:700|Open+Sans:300,400,700&display=swap" rel="stylesheet">
</head>
<body>
	<div class="hi">
		<header>
			<div class="hi__header_logo">
				<img src="img/icons/pex.svg" alt="" class="hi__header_logo-img">
				<img src="img/icons/logo-text.svg" alt="" class="hi__header_logo-text">
			</div>
			<nav class="hi__header_menu">
				<a href="#" class="hi__header_menu-item">About</a>
				<a href="#" class="hi__header_menu-item">How it works</a>
				<a href="#" class="hi__header_menu-item">Services</a>
				<a href="#" class="hi__header_menu-item">FAQ</a>
				<a href="#" class="hi__header_menu-item">Contact</a>
			</nav>
			<div class="hi__header_search">
				<input type="text" placeholder="Search Website">
				<input type="image" src="img/icons/seach-glass.png">
			</div>
			<hr>
		</header>
		<div class="hi__content margin-content">
			<h1 class="hi__content_h1">Designs your eyeballs will thank you for </h1>
			<a href="#" class="hi__content_button">Get Started Today</a>
			<div class="hi__content_add-text">Lorem ipsum dolor sit amet, consectetur</div>
		</div>
	</div>
</body>
</html>

БЛОГ НА HUSL

Фуллскрин картинка на заднем фоне

Ответы (0 шт):