Question

我正在尝试在我的引导网站上获得全宽背景。我有这个适用于桌面浏览器，但移动设备不播放球。这是我的代码（简化）;

html {
   background:url(../img/bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;
  background-color: #131516 !important;
}
body {
  background-color: transparent !important;  (to override bootstraps default color)
}

我遇到的问题是我正在测试的很多移动设备（android / iphone）不支持固定位置，因此当您滚动页面时背景图像会向上移动。我的网站都内置在一个页面中，因此将上面的代码移动到body标签意味着背景图像在内容（现在100％高度）在垂直方向上很长时会变得非常拉伸。

如果有更好的css方式来做到这一点是理想的，但我可以想象jquery是需要的。我已经尝试了here中的一些jquery示例，但我没有一个能够正常工作。有没有人有一个简单的跨平台方式来使这项工作？

Answer 1

制作div并使用位置：fixed。

.background {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:url(../img/bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%; /* or change accordingly - not quite clear in question */
  width: 100%;
  background-color: #131516 !important;
}

希望这有帮助。

手机上的Bootstrap全宽背景

1 个答案: