does a background-attachment of fixed work in iOS5?
According to this background-attachment support matrix, no.
Another post suggests that coming up with a workaround for mobile devices is not worth it:
...both Android and iPhone block timers or render during scroll, so the
effect is that divs move with the scrolled page and only after,
eventually, divs come back in the expected position. This is against position fixed idea
iOS moves background image when positioning fixed
I found a quite suboptimal solution, but at least it works. I don't use background-image
in CSS anymore but put a img
tag inside the background div and position it absolute:
#background img {
top:0;
left:0;
right:0;
bottom:0;
position:absolute;
}
Here is the fiddle
Unfortunately, the paragraph "this is text" is not vidible anymore. Lucky, thats it's just for background...
Also the image is not centered anymore, nor resized correctly :[
Edit
I added the following CSS to fix the positioning:
#background img {
margin-left:auto;
margin-right:auto;
}
Workaround for 'background-attachment: fixed' which is not working in iOS4
I am not sure what is going on with the CSS and have not had a chance to check it out for myself but I know when I was trying to get rid of the shadows from a UIWebView I used this bit of code:
NSArray *sv = [NSArray arrayWithArray:[myWebView subviews]];
UIScrollView *webScroller = (UIScrollView *)[sv objectAtIndex:0];
NSArray *wsv = [NSArray arrayWithArray:[webScroller subviews]];
[[wsv objectAtIndex:6] setHidden:YES];
[[wsv objectAtIndex:7] setHidden:YES];
[[wsv objectAtIndex:8] setHidden:YES];
[[wsv objectAtIndex:9] setHidden:YES];
and it got rid of the shadows. I thought I got the answer off of a SO question but when I looked for it this is the only one that came up.
It passed App Store inspection.
How can I set fixed position Background image in jquery mobile for iPhone app using Phonegap
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)
Related Topics
Have a Fixed Position Div That Needs to Scroll If Content Overflows
Prevent Flex Items from Overflowing a Container
Force Sidebar Height 100% Using CSS (With a Sticky Bottom Image)
Does 'Position: Absolute' Conflict with Flexbox
How to Set the Height of a Div Based on a Percentage-Based Width
Align Button at the Bottom of Div Using CSS
How to Style the Ul List to a Single Line
How to Align Spans or Divs Horizontally
Display Property Differences for Inline-*Something*
Make Scrollbars Only Visible When a Div Is Hovered Over
How Is the "Greater Than" or ">" Character Used in CSS
Apply Webkit Scrollbar Style to Specified Element
How to Use 3-Digit Color Codes Rather Than 6-Digit Color Codes in CSS