Geek Answers Handbook

Workaround for "background snap: fixed" that doesn't work in iOS4

I am trying to get a webpage with a fixed background image, so the image does not move when the page scrolls in UIWebView.
I found the following: background-attachment: fixeddoes not work in iOS4 (using 4.2.1). To perform a double check, I prepared a page with a code snippet (below) inside the section <head>, and the page works as expected in Safari and Firefox on Mac, but iPhone Safari fails to do this ...

What do you propose as a workaround to achieve the expected results? I made my UIWebView translucent and added a UIImageView, so I see a “fixed background image” through a translucent page. Unfortunately, I see the borders of the UIWebView when I look at its end / start edges.

Is there any official Apple resource / webpage that says it’s background-attachment: fixednot implemented for iOS4?

Hooray!

PS The above code snippet:

<style type="text/css">  
body {  
    background: #ffffff url('image.jpg') fixed no-repeat;  
    background-attachment: fixed;  
}  
</style>
+5
source share
2 answers

I am not sure what is happening with CSS and I did not have the opportunity to verify this myself, but I know when I tried to get rid of the shadows from the 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];

. , SO, , , .

.

+1

div z-:

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

iOS 5 iOS 6.

+1

More articles:


All Articles