How to make a responsive color design with image.

I am doing a frontend mentor project. There is a background-color for the nav and hero section. However, I do not know how to achieve that because nav is in the </header>, hero section is in the </main>, which I cannot apply a background-color-class, there is also margin between. I tried to use pseudo elements and absolute value, but it is just too hard to make it responsive. I tried applying it on body, but it will take up the whole site. Anybody can guide me how to achieve this background-color design.