does background-attachment work on iPhone?

Discussion in 'Web Design and Development' started by illitrate23, Jul 20, 2008.

  1. illitrate23 macrumors 6502

    illitrate23

    Joined:
    Jun 11, 2004
    Location:
    uk
    #1
    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
    Code:
    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...
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    The CSS looks right, so looks to be an iPhone thing.
     
  3. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #3
    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
     
  4. illitrate23 thread starter macrumors 6502

    illitrate23

    Joined:
    Jun 11, 2004
    Location:
    uk
    #4
    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
     
  5. pashik macrumors member

    Joined:
    Jul 16, 2008
    #5
    Hi
    did u find solution for that problem?
     
  6. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #6
    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:

    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
     

Share This Page