背景以 PC 为中心，但不在移动设备上答案

【问题标题】：Background centers on a PC, but not on mobile背景以 PC 为中心，但不在移动设备上
【发布时间】：2014-09-02 13:35:46
【问题描述】：

我的网站无法在移动设备上正常显示

这是我在 CSS 中使用的代码，这也是我希望它在移动设备上执行的操作：

html {  
  background-image: url(/wp-content/themes/Newstyle/images/bg.jpg), url(/wp-content/themes/Newstyle/images/bg-repeat.jpg);
  background-attachment: scroll, scroll;
  background-color: #000;
  background-repeat: no-repeat, repeat-y;
  background-position: center top, center top;
}

html, body {
  width:100%;
  height:100%;
}

我不知道我做错了什么，我尝试了一些修复方法，但我无法使其正常工作。有人可以帮忙吗？链接如下。

My website - http://renoized.com

【问题讨论】：

你能试试background-size: 100%吗？
您可能遇到了与this question 中的用户相同的问题。据说，iOS 浏览器不支持将 body 标记的背景图像居中……这可能也适用于 Android。建议的解决方法是使用包装器并将图像应用于该包装器。我现在不需要工具来测试它。
@khakiout 加了，恐怕没用。
@WoodrowBarlow 这是我尝试过的，我包含了背景包装，但遗憾的是它没有效果。并且在添加“背景位置-x：50％；”时它切断了图像的一半。

标签： html css mobile

【解决方案1】：

你可以试试：

背景尺寸：封面；

或

使用图像而不是背景，使用绝对定位和 -999 的 z-index 值。由于 iOS 不支持 100% 宽度的背景图片。

【讨论】：

第二种方法可以重复图片吗？我试过第一个，可悲的是，没有骰子。它改变了图像，但它在台式机上太大而在移动设备上太小了。这令人困惑。
您可以使用媒体查询来获得良好的修复。例如，当屏幕变为平板电脑/移动设备大小时，使用媒体查询隐藏背景图像，并取消隐藏上面的图像修复。我希望这很清楚。如果不让我知道，我会编一个代码笔：D
我认为您描述的方法与我在下面找到的修复方法非常相似。如果您认为这会对发现此问题的人有所帮助，那么可能值得为未来的堆栈用户解释代码。

【解决方案2】：

我用来解决问题的方法是this，不管它多么优雅或不优雅，我很高兴它可以工作。

我所要做的就是从这里复制 css：

html {  
  background-image: url(/wp-content/themes/Newstyle/images/bg.jpg), url(/wp-content/themes/Newstyle/images/bg-repeat.jpg);
  background-attachment: scroll, scroll;
  background-color: #000;
  background-repeat: no-repeat, repeat-y;
  background-position: center top, center top;
}

到我的内容容器标签，在我的例子中是#page。

这样做的目的是在正确的位置为内容提供自己的背景。它还解决了我在 .desktops 上遇到的一个问题，如果您的设备宽度小于内容 <div>

，背景会移动

【讨论】：