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; и фон стал адаптивным

Ваш ответ

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

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