如何防止背景位置 moving/collapsing？

Question

我对这些东西很陌生，但我边学边学，也参加课程，但有时我会遇到像这样的小障碍。

当浏览器处于 100% 时，背面图像很棒，但当您一直最小化到 25% 时，背景图像位置会折叠或 "hides" 我希望图像的背景位置居中顶部无论最小化还是最大化都保持完整。

我附上了一个例子：

它缩小到 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

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

希望对您有所帮助，请不要犹豫，在这里提问。

Answer 2

检查您的代码并发现：

@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
    }
}

对于介于 320 像素和 480 像素之间的视口宽度，您正在重新设置元素的宽度和高度，因此图像会缩小。

您可以让宽度和高度为默认情况下的 100%。如果还有什么要提出的，请评论。

如何防止背景位置 moving/collapsing？

How can I prevent background position from moving/collapsing?

html

css

header

division

background-image