does background-attachment work on iPhone?

[illitrate23]

Hi,
I've been searching this forum and google for an answer, but haven't found anything yet.

Is it possible to use CSS to fix a background image so that it doesn't scroll with the rest of the pages, when it is viewed on an iPhone/iPodTouch ?

i've been trying

body {
	background-image: url(bkgnd.jpg);
	background-position: top right;
	background-repeat: no-repeat; 
	background-attachment	: fixed;

but that does not seem to work
or have i got something totally wrong?

i'm guessing it is because on the iPhone, you're not actually scrolling the page within a window, you are effectively scrolling the whole window up and down the screen - so even though the background is fixed, it will still move in the same way that on the desktop, if you click the browsers title bar with the mouse and drag it up and down your screen, the background image will move with it?

but if anyone does know of a way to get the text on the page to scroll but the image to remain static, would be most grateful for any suggestions.

cheers
..jai...

 

[angelwatt]

The CSS looks right, so looks to be an iPhone thing.

 

[SrWebDeveloper]

More specifically a Safari issue on the iPhone. Would this be 3G or original?

On a side note, probably just a typo or error in copy/paste here, but I don't see a closing } for your body selector. I saw a few issues about scaling, i.e. the background image being resized which affected layout and the general solution was slice into smaller parts or use CSS3's background-size selector set to the dimensions in pixels of your image. It's supported on Safari 3.0 which I believe in supported in iPhone 3G. If this is a bug, might want to report it in the iPhone forums on MacRumors.

-jim

 

[illitrate23]

thanks very much for the replies - and confirming the css was right and i wasn't going mad

yes, the missing } was me missing it on the copy

I shall play around with the size issue and see if that is what causes it - if it turns out to provide a solution i'll let you guys know

cheers

 

[pashik]

thanks very much for the replies - and confirming the css was right and i wasn't going mad

yes, the missing } was me missing it on the copy

I shall play around with the size issue and see if that is what causes it - if it turns out to provide a solution i'll let you guys know

cheers

Hi
did u find solution for that problem?

 

[SrWebDeveloper]

I thought about this one some more and believe it is "viewport scrolling" just as illitrate23 himself said previously, but I also speculate this occured because the page is scaled in the 3G . I found this also when discussing background-fixed in CSS2 which seems to back this up:

The background image is fixed, not relative to the element but relative to the entire window. To the uninitiated, the effect can be quite startling. It's best to see the element as a sort of "window" through which you view the background image. If this "window" moves, you see a different part of the background image.

Source

So maybe not a bug after all. The trick is to not scale the page but format it perfectly (absolutely position, static height/width) for the 3G window size, to prevent the need for viewport scrolling. I recall there are templates out there that do this to help developers fit their content in properly. Just a guess, untested.

-jim