Проблема с фоновым изображением сайта при просмотре на мобильных устройствах?

Question

[YakutD]

Здравствуйте,я новичок как на этом форуме, так и в Wordpress в целом,поэтому сильно не серчайте^^
Перехожу к сути,больше чем у половины пользователей просматривавших сайт с мобильных телефонов фоновые изображения страниц отображались некорректно.Я подозреваю что проблема с cover.
У меня и еще нескольких пользователей результат корректный.Инструменты разработчика в разных браузерах тоже показывают положительный результат.Основное фоновое изображение я поставил прописав в редакторе следующий код:
body {
-moz-background-size:cover!important; /* растягиваю изображение по размерам окна для браузера Firefox 3.6 */
-o-background-size:100% auto!important; /* растягиваю изображение по размерам окна для браузера Opera 9.5 */
-webkit-background-size:100% auto!important; /* растягиваю изображение по размерам окна для браузера Safari 3.0 */
-khtml-background-size:cover!important; /* растягиваю изображение по размерам окна для браузера Konqueror 3.5.4 */
background-size:cover!important; /* растягиваю изображение по размерам окна для всех браузеров поддерживающих технологию CSS3 */
background-image:url('images/maxresdefault.jpg')!important;
background-attachment: fixed!important;
}

Для отдельных страниц я поставил другие фоновые изображения с помощью плагина Custom Background Extended.
1 скрин - неправильный результат

2 скрин - кошерный результат


Сайт gerafilm.com

Вообщем,уже не знаю что и думать.

Comments

[Ankhena]

1. Где Вас научили писать такое количество important, главное зачем?
2. "Firefox 3.6, опера 9.5" и т.д.
Вы шутите? Актуальная версия FF - 50 !

Answer 1

[Ankhena]

Итак, что у вас написано: взять картинку размером 609х381 и растянуть ее на все body, которое, например, на моем мобильнике 360х8237 точек.
Ну браузер его и растянул. Больше чем в 20 раз.

Comments

[YakutD]

Спасибо большое за ответ!Но я думал что cover сохраняет пропорции изображения соразмерно экрану.Как правильно прописать?И как быть с плагином?

[Ankhena]

YakutD: так пропорции и остались неизменными.

[YakutD]

Ankhena W: но на некоторых устройствах же результат выходит корректным

[Ankhena]

YakutD: Поскольку никакой конкретики по этим устройствам и браузерам вы не даете, то можно предположить, что они по другому интерпретируют высоту body. Она у Вас нигде не указана (обычно для html и body указывают height/min-height равными 100%). А дальше идут элементы с float.

[YakutD]

Ankhena W: Я ставил min-height и html и body 100%,но ничего не изменилось.Как можно обойти эту проблему?Может есть какие то альтернативы? Касательно конкретики по устройствам-ну у меня стандартный браузер,Андроид 4.2.2 Пользователи у которых отображается неправильно имеют совершенно разные устройства,не знаю есть ли смысл уточнять какие.

[Ankhena]

YakutD: Еще раз. Картинка высотой 381 точка, вы хотите ее растянуть на 8+ тысяч точек. Какого другого результата хотите добиться?

Вариант, это fixed положение фона, а размеры 100vw по ширине и 100vh по высоте. Позиционировать по верху, а не по середине. Контент будет прокручиваться. Пропорции картинки, естественно нарушатся.

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

[YakutD]

Ankhena W: наверное это единственное решение,спасибо большое за совет.P.S. А !important я использую в таких количествах потому что шаблон деревянный,иной раз попросту не реагирует на прописываемые правила.

[Ankhena]

YakutD: логичный вывод: его надо просто переверстать ;)