При уменьшении окна появляется белая область снизу

Question

Когда меняешь ширину браузера, фон по ширине подстраивается, а по высоте нет. И в итоге выходит, что появляется белая область снизу.

Весь 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;
}

Answer 1

Попробуйте background-size: cover; Хотя судя по вашему скрину ваш фон лучше сделать через CSS стили

БЛОГ НА HUSL

При уменьшении окна появляется белая область снизу

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