html - 背景 :cover covered by div

Question

我将视差效果与 background-size: cover; 一起使用。当屏幕分辨率为 +1090px 时没有问题，但如果它更小，背景图像开始隐藏在底部 div 下。

这是我的 bg img 的 css 代码。

#bg6 { 
    background: url(../../../images/para/6.jpg) center bottom no-repeat fixed; 
    height:400px;
    width:100%;
    position:relative;
    z-index:-1;
    margin:0;
    padding: 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

我正在寻找一种方法来限制 background-size: cover; 在达到总宽度 1090 后停止缩放。

UPD1 - http://jsfiddle.net/G7F7L/2/ fiddle 链接

UPD2 - 我自己找到的解决方案中的 1 个。

@media only all and (max-width: 1298px){
  #bg6 { 
    background: url(../../../images/para/6.jpg) center bottom no-repeat fixed; 
    height:400px;
    width:100%;
    position:relative;
    -webkit-background-size:  auto;
    -moz-background-size: auto;
    -o-background-size:auto;
    background-size: 1298px auto;
    z-index:-1;
    margin:0;
    padding: 0;
  }
}

它有点乱，但它可以完成工作。低于 1298px 后，背景停止拉伸(stretch)。

Answer 1

这是您要找的吗？

http://jsfiddle.net/JyeA9/1/

background-size:100% auto;

我做过一些视差相关的工作，但遇到了同样的问题。视差拉伸(stretch)背景的一个问题是，随着图像变小，您必须使用媒体查询调整 div，否则会弄乱图像大小与 div 的比率。