Фон покрывает только половину страницы на мобильном телефоне

Question

Все нормально, когда я открываю его через браузер ПК

Я изменил высоту на 350%, она работает, покрыла весь экран, но изображение получается таким растянутым. Я изменил размер фона, чтобы он не работал.

{background-image: url(bg.jpg) ;

background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: 100% 100%

вот как это выглядит Изображение заканчивается здесь

выглядит даже хуже, когда я переключаюсь в режим рабочего стола

Изображение заканчивается здесь

Answer 1

Лучшим вариантом здесь будет использование медиазапроса для размеров мобильных устройств и либо другого изображения с заданным соотношением сторон для мобильных телефонов, либо изменение положения фона и размера в соответствии с требованиями телефона.Приведенный ниже код поможет вам начать работу.

/*--For Desktop--*/

body{
    background-image: url(bg.jpg) ;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: 100% 100%
}

@media only screen and (max-width: 600px)  {
    body{
        background-image: url(theotherimage-withnewaspectratio.jpg);
    }
}

Также - максимальная ширина, которую я бы изменил в зависимости от того, когда ваше изображение начинает выглядеть нечетко на рабочем столе, а не на 600 пикселей (просто уменьшите экран в режиме разработчика, чтобы сказатьширина пикселя)

Answer 2

Измените размер фона, чтобы покрыть вместо 100% 100%, я думаю, это поможет вам как-то

Answer 3

Попробуйте добавить минимальную высоту к 100vh. Может быть, это поможет

Добавьте этот код CSS к вашему div

min-height: 100vh;