background-image не отображается в браузере телефона

Question

У меня есть следующий CSS, чтобы получить изображение на фоне моей страницы и цвет вокруг него.

#home{text-align:center;background:Red url('/Content/image.png') no-repeat fixed center;} 

Когда я запускаю его на своем компьютере с любым браузером (я предпочитаю Chrome), все в порядке. Однако, когда я открываю веб-сайт на своем телефоне (также используя Chrome), я вижу только цвет фона, а не изображение. Однако, как только я удаляю центральную часть (фоновое положение), я вижу это.

Любая идея?

Answer 1

После некоторого поиска я обнаружил, что изображения размером более 1024 пикселей не отображаются на iDevices. Я использовал медиа-запрос для изменения фона, например:

@media all and (max-width:900px), (max-device-width:900px){ 
body{ 
background-image: url('smaller-image.gif'); 
} 
} 

Надеюсь, что кто-то поможет.

Answer 2

Я столкнулся с одной и той же проблемой, затем я применил background:url("../img/pic1.jpg") no-repeat center; свою работу, которую вы можете попробовать, если столкнулся с проблемой в ios.

Answer 3

В настоящее время на самом деле не имеет значения, имеет ли изображение ширину более 1024 пикселей. Вопрос для меня, что вызвало не отображает фоновое изображение было: background-attachment: fixed;

В этом случае, просто измените эту строку background-attachment: scroll; с @media запроса