How can i prevent background position from moving/collapsing?

See more:

CSS

HTML

CSS3

HTML5

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:



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.