Still getting the hang of all this, but I'm making progress by learning on the go and enrolling in courses. Sometimes I face small obstacles like the one I'm encountering now.
Everything looks great when the browser is at 100%, but when I minimize it to 25%, the background image position shifts or disappears. I want the background images' position to stay centered at the top regardless of whether I minimize or maximize the browser.
Here's an example:
https://i.sstatic.net/ZJuD7.jpg The image is zoomed out to 25%. You can visit medshopandbeyond.com and zoom out to see the issue.
This is the HTML code I used for the background images:
<div id="header-image6"></div>
And this is the CSS code 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;
}