it really does matter if the parent container is class targeted or id targeted isn't it? it's hard to overthrow a container with id targeted so painting background in section#main is bad idea, probably

the background: url(insert-url); behaves differently than img src="insert-url" ...how to make the first one fit into responsive container, I came across of it but I have forgotten. probably written somewhere in here

it's object-fit isn't it?

nope it isn't. browsing it is

it's strange, but declaring background: url( ); then width and height is different than declaring width and height, then background: url( );

.banner-bg {
width: 100%;
max-width: 90rem;
height: calc(100vw * 9 / 16);
max-height: calc(90rem * 9 / 16);
background: url( );
background-size: 100% 100%;
}
...this works. it looks dumb but it works

A Deep Dive Into object-fit And background-size In C...

aspect-ratio: x/y; does exists

...I still find it stupid how margin-top % refer to width of the container and not height