Website body background rendering a right white margin in iPhone Safari

Asked 27/4, 2011 at 12:54 Answered 4/8, 2013 at 15:8

I have a rendering error in this website which I haven't seen anywhere else. The website renders in all modern browsers and validates fine although I can't figure out why is it not displaying the full background image (see screenshots below). I am using Yahoo CSS Reset and the background image is declared in the body like this:

background: url("back.jpg") #033049;

You can also visit the website: http://xaviesteve.com/

enter image description here

Let me know if I should provide any more details. Any help/hint is appreciated, thank you.

EDIT

I have found very few people reporting this issue around the Internet:

Another SO question: White space showing up on right side of page when background image should extend full length of page Suggested applying overflow-x:hidden but it crops the website.
In an iPad forum: http://www.ipadforums.net/ipad-development/9954-mobile-safari-doenst-show-background-image-when-page-slided-left.html No replies

SOLUTION

I've been investigating and trying different ways to solve this and found that adding the background image to the <html> tag fixed the problem. Hope this saves some time to other devs.

Before

body {background:url('images/back.jpg');}

After

html, body {background:url('images/back.jpg');}

Audit answered 27/4, 2011 at 12:54 Comment(0)

Moving the styling to the html element works fine, but there are other ways of fixing this.

What's going on here is initially the body element is sized according to the viewport. If the viewport is only X pixels wide, your body will only be X pixels wide, even if the contained content is wider. To fix this, give your body (or whatever you're attaching the background stylings to) a non-percentage based width or a min-width to fit your content.

You actually get the same issue on desktop browsers by narrowing the browser window and scrolling to right. The problem is more noticeable on the iPhone/iPad because by default, Mobile Safari will set the viewport to 980px, and then zoom out until all your content fits on screen.

An alternate solution, which I wouldn't recommend because it only works for Mobile Safari is setting the viewport width yourself using:

<meta name = "viewport" content = "width = 1080">

More info at Apple's Developer Docs.

Pinnule answered 27/4, 2011 at 18:28 Comment(1)

Thanks Walter! min-width is the way to go, specially in websites where width should be 100% – Audit 28/4, 2011 at 11:22

Just ran into this problem and fixed it by setting all content that uses width:100%; to also have min-width set larger than the width of your content divs. FOr example:

.content_bg{width:100%; min-width:1080px;}

I also fixed it on mobile devices using media queries: for iPhone and iPad:

/*ipad portrait*/    
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
      body{width:1080px;}
    }

/*ipad landscape*/    
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      body{width:1080px;}
    }

/* iPhone [portrait + landscape] */
@media only screen and (max-device-width: 480px) {
        body{width:1080px;}
    }

Birdsong answered 10/7, 2012 at 17:57 Comment(1)

really, you dont need the media queries if you have your min-width set – Birdsong 10/7, 2012 at 18:10

None of those solutions solved my problem, but I found out a rather simple one. Just set the background-size of your bg container equivalent to the image dimensions, like this:

body {
    background-image: url(bg.jpg); /* image dimensions: 1920 x 3840 */
    background-size: 1920px 3840px;
}

Although it may seem a bit redundant and not nearly as good as making your site responsive, it works fine.

Bellringer answered 9/3, 2012 at 18:59 Comment(0)

Set background-size to 100% and background-position to top-left. It will works fine as follows:

background-color: #336699;
background-image: url('whatever.jpg');
background-repeat: no-repeat;
background-position: top left;
background-attachment: fixed;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;`enter code here`

Deposit answered 4/8, 2013 at 15:8 Comment(0)

I know this is already answered some time ago, but none of the fixes I could find worked for me, but I managed my own solution which should work for most people I imagine.

Here's my code:

html { background: url("../images/blahblah.jpg") repeat-y; min-width: 100%; background-size: contain; }

Hopefully it helps someone!

Overvalue answered 19/4, 2012 at 3:23 Comment(0)

Recommended topics

Hot tags