Background Image changes position on resize

[Flogisch]

I have no idea why, but the background-image changes the position if I resize the window.
I’ve tested a few things, but nothing worked to get it fixed. So that it doesn’t change the position.
Hope you can help me out! Made a short video below with the issue & code. Thanks!! :)

.header {
position: absolute;
background-image: url('../assets/images/header-bg.jpg');
background-position: 0em -4em;
background-size: cover;
background-repeat: no-repeat;
margin-top: 1.9em;
left: 0;
width: 100%;
height: 150px;
}

https://youtu.be/XW4jpG5g9LE

[Beverleyh]

It looks like it’s behaving as expected using the specified background-position and background-size

What exactly is the undesirable behaviour?

How do you believe it should behave instead?

I’ve tested a few things, but nothing worked to get it fixed. So that it doesn’t change the position.

The position isn’t changing. Do you mean the “zooming” effect? Read up more on background-size and it’s available values.

[Flogisch]

Oh, yea… no Ide why I haven’t checked that property… This property caused the image to resize… Thanks a lot!

[Author]

Posts