背景图片超出#wrap div

Question

我有一个带有 #wrap div 的网站，该网站位于页面的中心，属性为 { margin: 0 auto; }

我的封面图片应占据整个主体的宽度（超过 #wrap）和 780 像素的高度。

图像不是从左侧的绝对点 0 开始，因为 #cover div 在居中的 #wrap div.

内

我该如何解决这个问题？

我的HTML:

<div id="wrap">

    <div id="cover"></div>

</div>

我的CSS:

#wrap {
    width: 960px;
    margin: 0 auto;
}

 #cover {
        background-image: url(bg.jpg);
        background-attachment: fixed; 
        background-clip: border-box; 
        background-position: center; 
        background-repeat: no-repeat; 
        background-size: cover; 
        height: 780px; 
        z-index: -10;
    }

Answer 1

如果你想让你的背景位置来自 x=0 和 y=0，你需要设置 background-position: top left 而不是 center。对于 background-size: cover，您是在告诉背景应该覆盖所有 div，因此对于左侧位置，您可以从右侧和底部松开部分。

解决方案：

#cover {
    background-position: top left; 
}

Answer 2

不清楚您要达到什么目的。根据您的问题描述，听起来您想要一个固定的全角背景。有很多方法可以实现这一点。在这种情况下，你应该绝对定位 #cover 并给它一个 100% 的宽度和一个固定的高度 780px.

我在这个例子中使用了百分比，纯粹是为了让它更适合代码段 window。我还让 #wrap 更高，并赋予它半透明的背景颜色，这样您就可以看到 #cover 背景的固定性质。

html,
body {
  margin: 0;
  height: 100%;
  min-height: 100%;
}
#wrap {
  width: 80%;
  height: 120%;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.1);
  z-index: 1;
}
#cover {
  background-image: url(https://placekitten.com/300/300);
  background-attachment: fixed;
  background-clip: border-box;
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 78%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
}

<div id="wrap">
<div id="cover"></div>
  Lorem ipsum sed diam eget risus varius blandit sit amet non magna.
</div>

仅供参考。为了代码清晰起见，您不应将 #cover 元素放在 #wrap 中，除非您 want/expect 它以某种方式受其约束。在您的情况下，#cover 和 #wrap 元素在位置上不相关，因为 #cover 应该是整个页面的背景，而不仅仅是 #wrap。为了清楚起见，我将其移出，但无论如何修复都是一样的。

背景图片超出#wrap div

Background image exceed the #wrap div

css

background-image

responsive