响应式 div 背景，但不重复

Question

我正在尝试让这个 div 背景充当正常的 100% 图像并以相同的方式缩放。

我的 CSS：

.videobackground{
margin-top:-5px;
max-width:1140px;
height:348px !important;
background-image:url(imgs/rpp-behind-the-scenes-hero2bg.jpg);
background-position:center; /* IE fix */
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}

我的 HTML：

<div class="videobackground"></div>

这是我在桌面上的问题，看起来非常好。

桌面图片：

但是一旦我开始缩放页面，就会发生这种情况。

手机图片：

任何建议都将不胜感激，我觉得我几乎已经尝试了一切。我使用 div 背景而不是图像的原因是，我在 div 的左侧覆盖了嵌入的 youtube。

非常感谢！

亚当。

Answer 1

你可以添加

background-repeat: no-repeat;

到你的CSS。

所以它看起来像

.videobackground{
margin-top:-5px;
max-width:1140px;
height:348px !important;
background-image:url(imgs/rpp-behind-the-scenes-hero2bg.jpg);
background-position:center; /* IE fix */
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
background-repeat: no-repeat;
}

还有一个关于获取完整容器背景的链接。 https://css-tricks.com/perfect-full-page-background-image/

另外，作为旁注，您可以使用简写并结合所有 css 属性。

  background: url(imgs/rpp-behind-the-scenes-hero2bg.jpg) no-repeat center center fixed; 

Answer 2

在您的.videobackground div 上方和下方的 DIV 中有两张图片包含相同的图片，但与您的背景图片冲突。

您应该用另一个 DIV 包装这 3 个 DIV，并将背景图像分配给 那个 DIV（并将其从其他 DIV 中删除）

（还要确保使用background-repeat: no-repeat、background-size: cover 和background-position: center center）

评论后补充：

您的 HTML 代码是（部分）：

<div class="bit-1">
  <img src="imgs/rpp-behind-the-scenes-hero1.jpg" width="100%">
</div>
<div class="bit-1">
  <div class="videobackground"></div>
</div>
<div class="bit-1">
  <img src="imgs/rpp-behind-the-scenes-hero3.jpg" width="100%">
</div>

将我上面写的更改为：

<div id="wrapper">
  <div class="bit-1">
     <!-- contents here, but no image -->
  </div>
  <div class="bit-1">
    <div class="videobackground"></div>
  </div>
  <div class="bit-1">
     <!-- contents here, but no image -->
  </div>
</div>

在 CSS 中，从.videobackground 中删除背景图像并将其添加到 `#wrapper' 中，例如

#wrapper {
  background: url(imgs/rpp-behind-the-scenes-hero2bg.jpg) center center no-repeat;
  background-size: cover;
}

现在所有三个 DIV 都有一个共同的背景图像，而不是之前不合适的三个部分图像。