Bootstrap 3 руины мобильные полноэкранные страницы

Question

Я использую Bootstrap 3 для моей страницы интерфейса на сайте, которым я управляю. Я установил полное фоновое изображение страницы, используя этот CSS:

background-image:url('/path/to/image.jpg'); 
background-repeat: no-repeat; 
background-position: center center; 
background-attachment: fixed; 
background-size: cover; 

Это прекрасно работает ... На рабочем столе. На мобильном устройстве изображение изменяется до очень маленького разрешения, и оно подталкивается вверх над панелью bootstrap 3.

Here is a picture. На рабочем столе изображение покрывает полную страницу.
И вот jsfiddle.

Дело в том, что он отлично работает, если я удалю код начальной загрузки; например, на другой странице, не использующей bootstrap, используется тот же CSS. Изображение отлично масштабируется на рабочем столе и на мобильном устройстве.

В чем может быть проблема?

Благодаря

Answer 1

И наконец, я использовал; <img src="/resources/ui_bg.jpg" style="width:100%;height:100%;position:absolute;top:0;left:0‌​;z-index:-5000;" alt="">

Спасибо, ребята!

Answer 2

Я не уверен, но, может быть, в зависимости от используемого браузера на мобильном телефоне?

Попробуйте добавить:

-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 

Я мог бы быть неправильно, но стоит выстрел.

Надеюсь, это поможет.