Question

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

此刻，背景图片会向下滚动内容，这意味着有很多空白区域，因此照片下方的文字无法查看。

我已尝试将宽度和高度固定为100％并放置background-attachment: fixed;

也许我把它放在了错误的地方，但这些解决方案都没有起作用。非常感谢任何帮助。

CSS代码如下：

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

Answer 1

将固定背景应用于body：

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

Answer 2

虽然你的背景是固定的，但它所应用的div却不是。您可以设置＆＃34;容器流体团队＆＃34;绝对位置和做一些z-index的东西，或者你可以将固定的背景图像附加到文档的正文。

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;，但我认为他们在大约一年前修复了这个错误。你介意告诉我们你在测试它的设备/操作系统/浏览器吗？

我试图通过创建一个完整大小的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;
}

我记得我会使用一些不同的插件/库来自动执行此操作并提供其他功能。但至少在一年之内我还没有看到这个问题是iOS更新。

查看jQuery backstretch插件。

修复了移动设备上的背景

5 个答案: