移动设备上的固定背景

Question

我在设置此页面的背景时遇到问题 - http://troov.co/team/（在移动设备上）以便固定背景图像，只有内容向下滚动。

目前，背景图片会随着内容向下滚动，这意味着有很多白色区域 space，因此照片下方的文字是看不到的。

我尝试将宽度和高度固定为 100%，然后将 background-attachment: fixed;

也许我把它放错了地方，但是 none 这些解决方案都有效。非常感谢任何帮助。

CSS代码如下：

.container-fluid.team {
  background-image: url(../images/bg_teampage.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%; 
}

Answer 1

虽然您的背景是固定的，但它所应用的 div 却不是。您可以将 "container-fluid team" 设置为绝对位置并执行一些 z-index 操作，或者您可以将固定背景图像附加到文档正文中。

Answer 2

将固定背景应用于 body:

body {
  background-image: url(../images/bg_teampage.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  background-attachment: fixed;
}

Answer 3

如果您想将 background-image 保留在 .container-fluid 中，您可以将 position:fixed 和 overflow-y: scroll 添加到 .container-fluid.team，如下所示：

.container-fluid.team {
   background-image: url(../images/bg_teampage.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   width: 100%;
   height: 100%; 
   position: fixed;
   overflow-y: scroll;
}

否则我会把背景移到 body。

Answer 4

添加以下 CSS 样式：

body{
   overflow:hidden;
   }

.container-fluid.team {
background-image: url(../images/bg_teampage.jpg);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 163%;
}

Answer 5

我知道 iOS Safari 不支持 background-attachment: attached; 的一个旧错误，但我认为他们在大约一年前修复了这个错误。您介意告诉我们您在什么 device/OS/browser 上进行测试吗？

我曾经尝试通过创建全尺寸 div 并将其发送到后面（负 z-index）来解决此问题。

HTML

<body>
  <div id='background'></div>
  <!-- Actual Page Content Here -->
</body>

CSS

#background {
  background-image: url(path/to/image.jpg);
  position: fixed;
  top: 0;
  left: 0;
  z-index: -999999999;
}

我记得有一些不同的 plugins/libraries 我会用它来自动执行此操作并提供其他功能。但是我至少一年没有看到这个问题 iOS 更新。

查看 jQuery backstretch 插件。

移动设备上的固定背景

Fixed background on mobile device

html

css

background-image