如何防止背景位置移动/折叠？

Question

我对这些东西很陌生，但我正在学习，当我去学习课程时，但有时我遇到了像这样的小路障。

当浏览器处于100％时，后方图像很棒但是当你最小化到25％时，背景图像位置会崩溃，或者“隐藏”＃34;我喜欢这些图片＆＃39;背景位置中心顶部保持完整无论最小化还是最大化。

我附上了一个例子：

它缩小到25％。您可以访问 medshopandbeyond.com并缩小以查看问题。

这是我用于背景图片的html：

<div id="header-image6"></div>

这是我用过的CSS

#header-image6 {
    background-image:url("{{ 'WhoWeAre3.jpg' | asset_url }}"); 
    height: 750px;
    position: relative;
    background-repeat: no-repeat;
    background-position: center top;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size:cover;
    margin-bottom: 0px;
    width: 100%;
    margin-top: 30px;
   }

Answer 1

检查了您的代码，发现了这个：

@media only screen and (min-width: 320px) and (max-width: 480px){
#header-image6{
    background-image:url("//cdn.shopify.com/s/files/1/0930/6704/t/2/assets/WhoWeAre3.jpg?7803954532461737215");
    background-repeat:no-repeat;
    background-position:center;
    margin:0 auto;
    width:340px;
    height:250px;
    margin-left:-20px;
    display:none;
    visibility:hidden
    }
}

对于320px和480px之间的视口宽度，您将重新设置元素的宽度和高度，从而缩小图像。

您可以将宽度和高度设置为默认情况下的100％。请评论是否还有其他任何建议。

Answer 2

在您提供的课程"#header-image6"中，请更改"background-size:contain"。

希望所以它会帮助你在这里毫不犹豫地问。