Why is my background image keep shrinking when I resize the browser

user_13552407 0
Viewed 400

When resizing the browser or testing the responsiveness through devtools, the background image tends to shrink and move towards the left and when it reaches to a width like 600px the image only takes up half of the div, I looked around, and everyone suggest background-size: cover;, but that's not working. What am I doing wrong? How can I make it so that the image always covers the div?

#page-header {
    
    margin: 0 auto;
    width: 100%;
    height: 700px;
    background-image: url(an-image.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-origin: border-box;
    display:flex;
    align-content: center;
    
    }
responsive-design flexbox css
1 Answers

Because you are using height:700px and the background-image, your image will not occupy 100% of your width, but 700px of your height.

You have to use the <img/> tag. For exemple, add to #page-header position:relative; and overflow:hidden;. Then, add an img tag child (with the src attribute) with those properties:

position:absolute;
z-index:-1;
top:0;
left:0;
width:100%;
user_161201770
Related