How can I set fixed position Background image in jquery mobile for iPhone app using Phonegap

I am doing a iPhone app using Phonegap & also using jquery mobile. I want to set background image for data-role=page div. In this height of page is equal to screen & hence background is set to size of screen. But the page content length is much greater than screen & hence gray background is seen after image completes. My question is whether there is a way so that we can keep the background image fixed & scroll or move only content of page & not background image. Just to mention I have tried full size background jquery pluggin. Its working on Android but not on iOS.

Can anyone please help? Thanks in advance.

Ok, so what I did instead was to create a fixed element within the body element of the page. So it would look like

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

And for the CSS I stated the following:

    #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;
}

And this did the trick for me. Hopefully it helps (someone out there :P)

You looking for css background-attachment property.

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

Update:
background-attachment:fixed is supported from iOS 5, if you using older version of iOS you may consider usage of iScroll.

you can try this:

 .ui-mobile
 .ui-page-active{

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

 }

works fine for me.

Manikandan

You can set your background image to the jQuery page:

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

Try with this, this work for me.

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;

<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;
    }
}

The problem is that iOS mobile devices have errors rendering simultaneously background-size:cover; and background-attachment:fixed; so you have to fix it by @media

来源：https://stackoverflow.com/questions/8923656/how-can-i-set-fixed-position-background-image-in-jquery-mobile-for-iphone-app-us

标签

iphone

jquery-mobile

cordova

background-image

fixed