全宽背景响应网站

时间:2013-04-11 08:59:52

标签: html css css3 responsive-design

我遇到了一个问题,我无法弄清楚如何只使用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;
  }

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

因为我还需要这个向后兼容(IE 8+)我不能只依赖CSS3的'封面'所以我已经没有了无脚本的解决方案。

任何提示/想法都会受到极大关注!

1 个答案:

答案 0 :(得分:0)

您可以尝试在body标签上使用css元素,如此

  

#background {
      背景图像:网址( 'URL /到/图像/的/ choice.jpg');
      背景重复:重复-Y;
  }

这一切都在css1中,所以它应该向后兼容 你可以将它添加到你的bg或其他类或id中。