如何防止背景位置移动/折叠？ [英] How can i prevent background position from moving/collapsing?

问题描述

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



浏览器处于100％的背面图像很棒但是当你最小化到25％时，背景图像位置会折叠或隐藏，我希望图像的背景位置中心顶部保持完整，无论最小化还是最大化。



我附上了一个例子：



[！[在此处输入图片说明] [1 ]] [1]

缩小到25％。您可以访问

[medshopandbeyond.com] [2]并缩小以查看问题。





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

I'm pretty new to this stuff but I am learning as I go and taking courses too but sometimes I hit a small roadblock like this one.

When the browser is at 100% the back images are great but as you minimized all the way to 25% the background image position collapses or "hides" and I'd like the images' background position center top to remain intact no matter minimize or maximize.

I've attached an example:

[![enter image description here][1]][1]
It is zoomed out to 25%. You can visit
[medshopandbeyond.com][2] and zoom out to also see the problem.


This is the html I used for the background images:

这是我用过的CSS







＃ header-image6 {

background-image：url（{{'WhoWeAre3.jpg'| asset_url}}）;

身高：750px;

职位：相对;

背景重复：无重复;

背景 - 位置：中心顶部;

-webkit-background-size：cover;

-moz-background-size：cover;

-o- background-size：cover;

background-size：cover;

margin-bottom：0px;

width：100％;

margin-top：30px;

}



[1]：http：//i.stack.imgur。 com / ZJuD7.jpg

[2]：http：//medshopandbeyond.com



我的尝试：



我尝试过max-height，max-width，min-width，min-height，z-index，使用px从相对值变为绝对值百分比，背景大小：100％100％，等等。

This is the CSS I used for them



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

[1]: http://i.stack.imgur.com/ZJuD7.jpg
[2]: http://medshopandbeyond.com

What I have tried:

I've tried max-height, max-width, min-width, min-height, z-index, changing from relative to absolute using px instead of percent, background-size: 100% 100%, and more.

推荐答案

HTML：

转到 www.medshopandbeyond.com 并缩小至25％以查看问题

Go to www.medshopandbeyond.com and zoom out to 25% to see the issues

这篇关于如何防止背景位置移动/折叠？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！