title: How can I prevent background position from moving/collapsing?
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>I've attached an example:</p>
  
  <p><a href="https://i.stack.imgur.com/ZJuD7.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZJuD7.jpg" alt="enter image description here"></a> 
  It is zoomed out to 25%. You can visit 
  <a href="http://medshopandbeyond.com" rel="nofollow noreferrer">medshopandbeyond.com</a> and zoom out to also see the problem.</p>
  
  <p>This is the html I used for the background images:</p>
  
  <pre><code>&lt;div id="header-image6"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>This is the CSS I used for them</p>
  
  <pre><code>#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;
     }
  </code></pre>