SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict Zapppa's Avatar
    Join Date
    Aug 2009
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Issues with background repeat on iPhone etc

    Hi,

    I have a site where there is a large background that is static and non-repeating.

    Code CSS:
                    background-color:#000;
    		background-image:url(../images/bg_large.jpg);
    		color:#FFF;
    		background-repeat:repeat;
    		background-position:top fixed;
    		background-attachment:fixed;

    During cross browser checks its all looking good

    However on iPhone (and other mobile devices I am sure), the background repeats itself when scrolling down through the page.

    What do I need to add to make the background stay static on the iPhone / Ipad etc. ?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,376
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Zapppa View Post
    Hi,

    I have a site where there is a large background that is static and non-repeating.

    Code CSS:
                    background-color:#000;
            background-image:url(../images/bg_large.jpg);
            color:#FFF;
            background-repeat:repeat;
            background-position:top fixed;
            background-attachment:fixed;

    During cross browser checks its all looking good

    However on iPhone (and other mobile devices I am sure), the background repeats itself when scrolling down through the page.

    What do I need to add to make the background stay static on the iPhone / Ipad etc. ?
    It is repeating actually because you told it to do so here:

    Code:
        background-repeat:repeat;
    You would need no-repeat to stop it repeating:
    Code:
        background-repeat:no-repeat;
    However as there is no fixed positioning on an iphone so you will only get the image once and it will scroll away with the page. Maybe you could add a background-color for the iphone or merge/fade the image into the background-color at the bottom for a smoother effect.

    There is no fixed value for background-position and you probably meant this:

    Code:
      background-position: 0 0;
      background-attachment:fixed;

    You may be able to find a JS solution.

  3. #3
    SitePoint Addict Zapppa's Avatar
    Join Date
    Aug 2009
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •