Как установить фиксированное положение Фоновое изображение в приложении jquery mobile для iPhone с помощью Phonegap - PullRequest
Новая
       19

Как установить фиксированное положение Фоновое изображение в приложении jquery mobile для iPhone с помощью Phonegap

7 голосов
/ 19 января 2012

Я делаю приложение для iPhone, используя Phonegap, а также использую jquery mobile.Я хочу установить фоновое изображение для data-role = page div.При этом высота страницы равна экрану и, следовательно, фон установлен в размере экрана.Но длина содержимого страницы намного больше, чем у экрана, и, следовательно, после завершения изображения виден серый фон.У меня вопрос, есть ли способ, чтобы мы могли сохранить фоновое изображение фиксированным и прокрутить или переместить только содержимое страницы, а не фоновое изображение.Просто упомяну, что я пробовал полноразмерный фоновый плагин jquery .Он работает на Android, но не на iOS.

Кто-нибудь может помочь?Заранее спасибо.

Ответы [ 6 ]

9 голосов
/ 19 августа 2012

Хорошо, так что вместо этого я создал фиксированный элемент внутри элемента body страницы.Таким образом, это выглядело бы как 

<body>
   <div id="background"></div>
    ...
</body>

А для CSS я сказал следующее: 

    #background {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: url(images/bg-retina.jpg) 0 0 no-repeat fixed !important;
    background-size:contain;
}

И это помогло мне.Надеюсь, это поможет (кто-то там: P)

3 голосов
/ 19 января 2012

Вы ищете background-attachment свойство. 

div[data-role="page"]{
  background-attachment: fixed;
}

Обновление:
background-attachment:fixed поддерживается с iOS 5 , если вы используете более старую версию iOS, вы можете рассмотреть возможность использования iScroll.

0 голосов
/ 16 мая 2017 
<body>
   <div id="background"></div>
    ...
</body>

css: 

#background {
    background-image: url("/images/background.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 100%;
    width: 100%;
    position: fixed;
    background-position: 0 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

@media screen and (max-width: 480px) {
    #background {
        background-attachment: initial !important;
    }
}

Проблема заключается в том, что на мобильных устройствах iOS возникают ошибки при одновременном отображении background-size:cover; и background-attachment:fixed;, поэтому необходимо исправить это с помощью @media

0 голосов
/ 04 ноября 2015

Попробуй с этим, эта работа для меня. 

position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background: url(../Images/loginBackground.jpg) 0 0  fixed !important;
background-size:100% 100%;
background-repeat: no-repeat;
0 голосов
/ 11 апреля 2014

Вы можете попробовать это: 

 .ui-mobile
 .ui-page-active{

 display:block;
 overflow:visible;
 overflow-x:hidden;

 }

у меня отлично работает.

0 голосов
/ 01 марта 2013

Вы можете установить фоновое изображение на странице jQuery: 

.ui-page { background-image:url(../ios/sample~ipad.png);
background-repeat:no-repeat; background-position:center center;
background-attachment:scroll; background-size:100% 100%; }
...