How can I stop background from moving when zooming out?

Question

When the browser is at 100% the back images are great. Even at 50% zoom out they're still okay. but as you continue to zoom out 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:

http://i65.tinypic.com/k1e54z.jpg

You can also visit www.medshopandbeyond.com and zoom out in your browser to see what's happening. [BTW: I am aware of the grammatical errors in the pics :) ]

The only one that gets close enough to what I want is background-size:contain however the image is no longer full width from screen to screen if setting it to this

#header-image4 {
  
    background-image:url("{{ 'old-friends-555527_19201.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: -50px;
    background-size: cover;
    width: 100%;
    margin-top: -10px;
    
}

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

Answer 1

This is because you are using background: cover and a fixed height. As you zoom out your height remains the same but the width increases and background: cover will expand to fill that width which is why you are getting an unusual crop. The same issue can be seen if you pull out the width of the browser window on a large monitor.

Personally, I'd create a different height for the div at different breakpoints e.g.

@media screen and (max-width: 1920px){
    #header-image4{height: 1000px}
}
@media screen and (max-width: 2560px){
    #header-image4{height: 1500px}
}