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

Asked 19/1, 2012 at 9:27 Answered 16/5, 2017 at 12:59

Solved iphone jquery-mobile cordova background-image fixed

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.

Peptidase answered 19/1, 2012 at 9:27 Comment(0)

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)

Bowstring answered 18/8, 2012 at 22:59 Comment(0)

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.

Divorcee answered 19/1, 2012 at 9:32 Comment(2)

It works starting from iOS5, if you using older version of iOS WebKit version used by Safari doesn't support background-attachment:fixed – Divorcee 20/1, 2012 at 11:37

JuicyScripter has explained that fixed position only works on iOS5+ and that only using a library like iScroll will give the same effect on iOS4 and below. – Pantile 22/1, 2012 at 15:30

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

Asaph answered 1/3, 2013 at 15:14 Comment(0)

you can try this:

 .ui-mobile
 .ui-page-active{

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

 }

works fine for me.

Electrolier answered 11/4, 2014 at 16:37 Comment(0)

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;

Smack answered 4/11, 2015 at 1:17 Comment(0)

<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

Corespondent answered 16/5, 2017 at 12:59 Comment(0)

Recommended topics

Hot tags