0

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

обычное состояние

при уменьшении ширины браузера

Весь 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;
}
1
  • Что за квадраты Малевича?.. Commented 9 мая 2021 в 17:45

1 ответ 1

4

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

13
  • Но мне нужен именно этот фон, background-size: cover, background-size: contain и т.д. не помогают
    – trckbgc
    Commented 9 мая 2021 в 18:00
  • Ты уверен что это фон тебе ломает ? Очень похоже на iframe.... Может там height зафиксирован ? Commented 9 мая 2021 в 18:09
  • Без понятия, могу весь код скинуть, надо?
    – trckbgc
    Commented 9 мая 2021 в 20:49
  • Можешь переделать, потому что так не понятно Commented 10 мая 2021 в 3:38
  • 1
    Ладно, думаю мне стоит немного подучиться. Навряд ли кто-то будет специально менять масштаб страницы и изменять ширину браузера, поэтому это не так критично. Ну в общем-то спасибо, я многому научился благодаря вам.
    – trckbgc
    Commented 10 мая 2021 в 18:17

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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