Question

我的目标是在我的网站内容背后有完整的背景图片。我使用以下CSS来实现这一目标：

body {
    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;
}

我的问题是，虽然这在桌面上完美运行： Background image on the web 并且最初适用于移动设备：

Working on mobile

一旦JS提出新内容：

posts.innerHTML = newHTML + posts.innerHTML;

无论显示什么图像（我尝试过多张图像）都会根据图像显示为固定颜色：

Solid colour instead

当您发生这种情况时滚动时，底部会出现一个白色边框（一旦停止滚动就会填充颜色）

White border

如何解决这些问题？如果你想看到它在GitHub上的所有代码：https://github.com/NickGeek/Campfyre

Answer 1

我通过使用以下css解决了这个问题：

html, body {
    height: 100%;
}
html {
    overflow-y: hidden;
}
body {
    overflow-y: scroll;
    background-color:#000000;
    background: url(../img/bg.jpg) no-repeat center center;
    background-size: 100% 100%;
}

这允许我有一个完整大小的图像，而不使用固定属性，这是破坏Android，或封面属性也破坏（无论我把它放在什么元素）。我也不得不把背景色：透明;在身体上。

Answer 2

似乎正文设置为视口的高度。不能进一步增长，并且不会继承整个页面的真实高度。所以解决方案是添加一个包含dom的辅助div：

所以改变：

<body>
 ...code
</body>

到

<body><div class="scrollme-not-body">
 ...code
</div></body>

尝试

html {

    background: url(http://campfyre.org/img/bg.jpg) no-repeat center center fixed;

    background-size: cover

}

在Android上添加动态内容后，背景图像变为纯色

2 个答案: