Как сделать фон адаптивным?

217
13 апреля 2022, 03:20

Здраствуйте! Суть проблемы: при верстке сайта нужно, чтобы фон корректно отображался на всех устройствах, но при адаптивной верстке у меня фоновое изображение имеющее размеры 1920х1080 получается слишком маленьким для телефона и выглядит это вот так:

Вот код:

<body>
    <div class="content">
        <form class="box">
            <h1>LOGIN</h1>
            <p>Write your email below and we will send you an email with further instructions.</p>
            <input id="username" type="text" placeholder="Username">
            <input id="email" type="text" placeholder="E-mail">
            <input id="password" type="password" placeholder="Password">
            <div class="submit__btn">
                <input id="login" type="submit" value="Log In">
                <input id="signUp" type="button" value="Sign Up" onclick="showEmail()">
                <input id="recover" type="button" value="Recover">
                <input id="back" type="button" value="Back to Login" onclick="showForgotPassForm()">
            </div>

body {
    background-image: url(img/image.jpg);
    background-size:cover;
    background-repeat: no-repeat;
}

Пробовал через медиа запросы вставлять другую картинку с размерами 375х812 - результат тот же

Answer 1

Ответ нашёл самостоятельно, просто добавил min-height: 100vh; и фон стал адаптивным

READ ALSO
Как из дива сделать кнопку?
HTML

Как из дива сделать кнопку?

Имеется такая верстка

 223
Строка поиска и элементы управления (дизайн, css)
HTML

Строка поиска и элементы управления (дизайн, css)

Помогите сделать резиновый блок со строкой поиска и дополнительными элементами

 216
Переключатель класов на кнопках, toggle click buttons
HTML

Переключатель класов на кнопках, toggle click buttons

Как добавить к этому функционалу чтобы на toggle click каждого блока менялся фон на прозрачный и стрелка крутилась к низу rotate(180deg)

 148
Странное поведение background-image
HTML

Странное поведение background-image

Есть следующий код:

 77