Когда меняешь ширину браузера, фон по ширине подстраивается, а по высоте нет. И в итоге выходит, что появляется белая область снизу.
Весь HTML код:
<html>
<head>
<meta charset="utf-8">
<title>nevazhno</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" href="assets/favicon.ico">
</head>
<body>
<div class="card"></div>
<div class="card-hover"></div>
</body>
</html>
Весь CSS код:
@import url('https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap');
body {
background: url(assets/background.jpg) no-repeat;
background-size: 100%;
}
.card {
position: absolute;
width: 501px;
height: 390px;
left: calc(50% - 501px/2 - 0.5px);
top: calc(50% - 390px/2 + 99.5px);
background: linear-gradient(154.98deg, #0A0A0A 0%, #1E1E1E 100%);
border-radius: 0px 0px 4px 4px;
}
.card-hover {
position: absolute;
width: 501px;
height: 217px;
left: calc(50% - 501px/2 - 0.5px);
top: calc(50% - 217px/2 - 204px);
background: #0D0D0D;
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.45);
}
.logo {
position: absolute;
width: 215px;
height: 215px;
left: calc(50% - 215px/2 - 0.5px);
top: calc(50% - 215px/2 - 205px);
pointer-events: none;
}
a {
display: inline-block;
text-decoration: none;
text-transform: uppercase;
margin: -27px 108px;
font-size: 20px;
font-family: 'Rubik Mono One', sans-serif;
transition: 0.3s;
border-radius: 0px;
}