html - 响应式 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;