Фоновое изображение не отображается в мобильном браузере (но отображается в настольном браузере)

Question

У меня проблема с тем, что первое фоновое изображение на моем сайте отображается на рабочем столе, а не на мобильном (это просто серый фон). Изображение: .jpg, размер - 4595p x 2736p (546 КБ)

Веб-сайт: https://www.basit.dev/, полный код можно найти здесь, если необходимо https://github.com/Basit-Sheikh/basit.dev

Кто-нибудь знает, почему это может происходить?

Вот соответствующий код:

CSS:

.bg {
    background-image: url(../img/s0.jpg);
    height: 100%;
    background-position: 80% 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

HTML

<div id="slides">
    <div class="bg"></div>
</div>

Пример того, как это выглядит на мобильном телефоне

Answer 1

Я понял это. У вас не может быть фиксированного фонового изображения на мобильном телефоне, я использовал обходной путь, написав простой jQuery скрипт.