I want the image take up the whole page. Right now there's a big space under the image. Changing the transform, position and size properties doesn't affect the empty space's size.
HTML:
<head>
<link rel="stylesheet" href="layoutindex.css" type="text/css"></link>
</head>
<body>
<div class="wrapper">
<header>
<img src="https://images2.alphacoders.com/941/thumb-1920-941898.jpg" class="background">
</header>
</div>
</body>
</html>
CSS:
body {
margin: 0px;
}
.wrapper {
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
perspective: 10px;
}
header {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
transform-style: preserve-3d;
z-index: -1;
}
.background {
position: absolute;
height: 100%;
width: 100vw;
object-fit: cover;
z-index: -1;
transform: translateZ(-10px) scale(2);
}