How To Layout Image So It Is To Left Of Ad Space And Yet Centered Using Flexbox

I have the following HTML: I am trying to make it so I have 2 'sections' (the header and the section), both taking up the full viewport width/height. Then in the section (the seco

Solution 1:

Have you tried setting background-size?

header > div {
    background-position: center;
    background-size:cover;
    }

or using media query to set background size based upon viewports?

@media screen and (max-width: 992px) {
 header > div {
            background-position: center;
            background-size:70%;
            }
}