0

Здраствуйте! Суть проблемы: при верстке сайта нужно, чтобы фон корректно отображался на всех устройствах, но при адаптивной верстке у меня фоновое изображение имеющее размеры 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 - результат тот же

0

1 ответ 1

1

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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