Menu
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.
737
Set a background image using the HTML body elementAdd the bgproperties="fixed" code into the body element, as shown below. Next, add the background="location" attribute to the body tag, where location is the relative or absolute URL of the image. In the above example, background="bg.
The background-attachment property is used to specify that the background image is fixed or scroll with the rest of the page in the browser window. This property has three values scroll, fixed, and local. Its default value is scroll, which causes the element to not scroll with its content.
The background-attachment CSS property sets whether a background image's position is fixed within the viewport, or scrolls with its containing block.
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)
64
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.
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
