5

I'm struggling to get web page with a fixed background image, so the image does not move when page is scrolled in a UIWebView.
What I've discovered is: background-attachment: fixed does not work in iOS4 (using 4.2.1). To double-check I've prepared a page with code snippet (below) inside <head> section and the page works as expected under Safari and Firefox on Mac, but fails to do so in iPhone's Safari...

What do you suggest as a workaround for achieving the expected results? I've made my UIWebView translucent and added UIImageView, so I can see "fixed background image" through translucent page. Unfortunately, I can see UIWebView borders when I scroll over its end/beginning edges.

Is there any official Apple resource/web page stating that background-attachment: fixed is not implemented for iOS4?

Cheers!

P.S. The code snippet referred above: 

<style type="text/css">  
body {  
    background: #ffffff url('image.jpg') fixed no-repeat;  
    background-attachment: fixed;  
}  
</style>
thirtydot
  • 224,678
  • 48
  • 389
  • 349
matm
  • 7,059
  • 5
  • 36
  • 50

2 Answers2

1

Use a div for the background with a negative z-index:

<head>
<style>
#background {
    background: url("background.jpg") no-repeat;
    position: fixed;
    top: 0;
    left: 0;
    background-size: 320px 480px;
    width: 320px;
    height: 480px;
    z-index: -1;
}
</style>
</head>

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

This body text appears over the fixed background and scrolls.

</body>

Works on iOS 5 and iOS 6.

Jeff
  • 2,659
  • 1
  • 22
  • 41
  • This was an ok solution when all iPhones had the same aspect ratio. But that's no longer the case. Any good solutions across all iOS devices? – chadoh Aug 25 '15 at 13:54
1

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.

Community
  • 1
  • 1
Andrew HunzekerHesed
  • 324
  • 1
  • 7
  • Great tip! It worked and is a legitimate solution :) Tested in on iOS 4.2 (iPhone 4) and 3.1.3 (iPhone 3G). Only thing that can spoil the show is Apple changing something in view hierarchy, so I changed the code a bit to this: made a for-each for subviews and `if ([subView isKindOfClass:[UIImageView class]])` is true, I set the property `hidden` to true. Thank you Andrew! – matm Mar 21 '11 at 10:22