html - 全宽背景响应式网站

Question

我遇到了一个问题，我不太清楚如何仅使用 css 来解决。

在响应式网页上，我在每个页面上都有一个全宽背景，通过以下 css 加载到带有类 (bg) 的 div 上:

.bg{
   position:fixed;
   top:0px;
   z-index:-999;
   width:100%;
   height:100%;
   background-size: cover;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
  }

但问题是，如果页面内容很长，这些图像会在移动设备上造成问题。 (背景将被拉伸(stretch)以覆盖所有页面内容，甚至是屏幕外的内容)这意味着我经常只能在这些单元中看到背景左上角的污点。

因为我还需要它向后兼容(IE 8+)我不能只依赖 CSS3 的“封面”所以我已经用完了无脚本的解决方案。

如有任何提示/想法，我们将不胜感激!

Answer 1

你可以像这样尝试在 body 标签上使用 css 元素

#background{
background-image:url('url/to/image/of/choice.jpg');
background-repeat:repeat-y;
}

这一切都在 css1 中，因此它应该向后兼容。
您可以将其添加到您的 bg 或其他类或选择的 id。