Website body background rendering a right white margin in iPhone Safari_问答_开发者

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/

Website body background rendering a right white margin in iPhone Safari

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 addin开发者_Python百科g 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');}

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.

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

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.

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`

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!