В jQM, какой правильный / правильный / фактический способ установить полноэкранный фоновый рисунок CSS для страницы?

0

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

Я много разбираюсь в google/stackoverflow по этому вопросу. К моему удивлению, нет официальной документации, прямого/простого способа решения этой проблемы.

Многие предложения будут работать для некоторых людей, а не для других (даже для поддерживаемого браузера). Для меня сначала я не могу получить 100% -ную высоту, затем после некоторых google и помощи другого программиста я могу получить 100-процентную высоту, но теперь ее подпрыгивающий фон до и после перехода.

Вопрос для этого поста, есть ли правильный путь/правильный способ, официальный способ установить jQM Page background image БЕЗ ВСЕ ПРОБЛЕМЫ?

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

Пожалуйста, советую, спасибо.

Теги:
jquery-mobile

1 ответ

1

Рабочий пример: http://jsfiddle.net/Gajotres/vds2U/51/

Содержание фоновое изображение

HTML

<div data-role="page" id="index" data-theme="a" >
    <div data-role="header">
        <h3>
            First Page
        </h3>
        <a href="#second" class="ui-btn-right">Next</a>
    </div>

    <div data-role="content" id="content">

    </div>

    <div data-role="footer" data-position="fixed">

    </div>
</div>

CSS

#content {
    padding: 0;
    position: absolute !important;
    top : 40px !important; 
    right : 0;
    bottom : 0 !important; 
    left : 0 !important;  
    background:url(http://htc-wallpaper.com/wp-content/uploads/2013/11/bulldog-puppy1.jpg);
    background-size:cover;
    background-repeat:no-repeat;    
}

Подробнее об этом решении читайте здесь.

Изображение страницы

CSS

.ui-page {
    background:url(http://htc-wallpaper.com/wp-content/uploads/2013/11/bulldog-puppy1.jpg);
    background-size:cover;
    background-repeat:no-repeat;    
}
Поделиться
  • 0
    большое спасибо. Я попробую это сейчас.
  • 0
    Привет, ваш пример CSS работает, но с небольшой проблемой. Страница немного прокручивается, даже если содержимое страницы пусто. Я подозреваю, что это из-за верхнего и нижнего колонтитула вне прямой трансляции из DIV страницы. Кроме того, страница с изображением BG - не первая страница в моем многостраничном HTML-файле. Таким образом, причиной может быть неправильный расчет высоты содержимого, когда он еще не имеет верхнего и нижнего колонтитула. Я думал обновить контент DIV перед событием PageShow. Будет ли это работать? Если да, могу ли я узнать, какова функция обновления содержимого DIV? Пожалуйста, совет, спасибо.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню