Question

我在这个网站上有一个渲染错误，我在其他任何地方都没见过。该网站在所有现代浏览器中呈现并验证正常，但我无法弄清楚为什么它不显示完整的背景图像（见下面的截图）。我正在使用Yahoo CSS重置，并在正文中声明了背景图像：

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

您还可以访问网站：http://xaviesteve.com/

enter image description here

如果我需要提供更多细节，请告诉我。任何帮助/提示都表示赞赏，谢谢。

修改

我发现很少有人在互联网上报告此问题：

另一个问题：White space showing up on right side of page when background image should extend full length of page建议应用overflow-x:hidden，但它会裁剪网站。
在iPad论坛中：http://www.ipadforums.net/ipad-development/9954-mobile-safari-doenst-show-background-image-when-page-slided-left.html没有回复

解

我一直在调查并尝试不同的方法来解决这个问题，并发现将背景图片添加到<html>标记可以解决问题。希望这可以为其他开发者节省一些时间。

之前

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

后

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

Answer 1

将样式移动到html元素可以正常工作，但还有其他方法可以解决这个问题。

这里发生的事情最初是根据视口调整body元素的大小。如果视口的宽度仅为X像素，则即使所包含的内容较宽，您的正文也只会X像素宽。要解决此问题，请将body（或任何附加背景样式的内容）设置为基于非百分比的width或min-width以适合您的内容。

通过缩小浏览器窗口并向右滚动，您实际上在桌面浏览器上遇到了同样的问题。 iPhone / iPad上的问题更明显，因为默认情况下，Mobile Safari会将视口设置为980像素，然后缩小，直到所有内容都适合屏幕。

另一种解决方案，我不推荐，因为它仅适用于Mobile Safari，您可以使用以下方式自行设置视口宽度：

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

Apple's Developer Docs的更多信息。

Answer 2

刚遇到此问题并通过设置所有使用宽度的内容来修复它：100％;也可以将min-width设置为大于内容div的宽度。例如：

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

我还使用媒体查询在移动设备上修复了它：适用于iPhone和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;}
    }

Answer 3

这些解决方案都没有解决我的问题，但我发现了一个相当简单的解决方案。只需将bg容器的background-size设置为等效于图像尺寸，如下所示：

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

虽然看起来有点多余并且不如让您的网站响应一样好，但它运作正常。

Answer 4

将background-size设置为100％，将background-position设置为左上角。它可以正常工作如下：

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`

Answer 5

我知道这已经回答了一段时间了，但我找不到任何修复工作对我有用，但是我自己设定了解决方案，这对我想象的大多数人都适用。

这是我的代码：

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

希望它有所帮助！

网站身体背景在iPhone Safari中呈现正确的白色边缘

5 个答案: