响应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

你可以添加

.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;
}

给你的css。

所以它看起来像

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

这里也是获得完整容器背景的绝佳链接。 https://css-tricks.com/perfect-full-page-background-image/

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

{{1}}

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＆＃39;”，如

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

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