可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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/

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

回答1:

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.

回答2:

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

回答3:

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.

回答4:

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`

回答5:

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!