Фоновое изображение jQuery Mobile не отображается в полноэкранном веб-приложении iPad

Я установил фон для data-role = & quot; page & quot; элемент вроде так

<div data-role="page" style="background: transparent url('img/background.jpg') no-repeat;" >

Он отлично работает в браузере настольного компьютера и в браузере iPad Safari.

Проблема, с которой я сталкиваюсь, заключается в том, что когда вы добавляете веб-сайт на домашний экран в качестве «приложения»; и это полноэкранное веб-приложение. Это не показывает фон ...

Я попытался установить его с помощью таблицы стилей и встроенного, и оба способа дают мне одну и ту же проблему.

У меня совершенно нет идей относительно того, почему это не сработает.

Любые идеи с благодарностью.

 Max Rose-Collins24 мая 2012 г., 18:45
Отладка Mobile Safari не сообщает о каких-либо ошибках, и фоновое изображение в приложении просмотра Safari просто не отображается в полноэкранном режиме. Фоновое изображение 1024x768px
 Phill Pafford24 мая 2012 г., 18:55
 Phill Pafford24 мая 2012 г., 18:43
Насколько велико изображение background.jpg? Отладка Mobile Safari говорит что-нибудь?
 Phill Pafford24 мая 2012 г., 18:54
добавьте это в свой CSS: html, body {background: #ccc url (../ images / background.jpg); поле: 0; отступы: 0; высота: 100%; }
 Max Rose-Collins25 мая 2012 г., 11:02
Я не пытаюсь добавить страницу приветствия. Я просто хочу установить фон для всего приложения. Не относится.

Ответы на вопрос(5)

Решение Вопроса

<div data-role="page" id="home" style="background: #000000 
    url('img/background.jpg') repeat;">

не будет работать через CSS-файл.

.#target-element {
    background : transparent url(YOUR_URL) 0 0 no-repeat fixed !important;
    background-size : cover;
}​
 01 авг. 2016 г., 16:27
Это работает ... Мне просто нужно было установить высоту div и все готово. Если вам нужно центрировать изображение на заднем плане, измените 0 0 на 50% 50%

[data-role=page] {
    background: transparent url('img/background.jpg') no-repeat;
}

!important перешагнуть рамки CSS. Вот почему он работает только inline

<style type="text/css">
.ui-page 
{

    background-image: url("img1.jpg");
    background-attachment:fixed;
    background-repeat: no-repeat;
    background-size: 100%;
}
</style>
 18 окт. 2012 г., 21:20
это повлияет на все страницы

Ваш ответ на вопрос