Background Image on Color Section Responsive?

you had to know the aspect ratio of your bg-image. then you can calculate the height of that section in relation to 100vw of width.
f.e. if your bg-image is a 16/9 image – then the height should be 56.25vw. So you can force the height to be of that height of the image.

This will work if your content does not grow over that height.
See an example here: https://webers-testseite.de/colorsection-responsive/

you are talking about a color-section – and its background image – right? i can not see the header image in your question.

vw is another relative length value. https://css-tricks.com/the-lengths-of-css/#aa-vw
1vw is equal to 1% of the width of the viewport ( viewport width = vw)
so if you like to have the background-image to have full width – you can set the bg-image to cover the container – so it has a width of 100vw.
Now if you got a background-image that has a 16:9 aspect ratio then. 16 = 100vw and 9 = x vw ?
Simple rule of three the height of the container had to be 56.25vw.

you see my example page that this is a responsive color-section. The only problem is that now the height of the container no longer grows with its content. But if you only got a heading f.e. with fluid font-size – this will work in that manner.