How can I prevent background position from moving/collapsing?

Question

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:

It is zoomed out to 25%. You can visit medshopandbeyond.com and zoom out to also see the problem.

This is the html I used for the background images:

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

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

Answer 1

Checked out your code and found this:

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

For viewport width between 320px and 480px, you are re-setting the element's width and height and thus the image shrinks.

You can let the width and height to be 100% as it is in the default case. Please comment if there is anything else to put forward.

Answer 2

In the class "#header-image6" that you provided, do change "background-size:contain".

Hope so it will help you else do not hesitate to ask here.