Trying to figure out how to integrate this design:
https://i.sstatic.net/r70a4.png
The challenge lies in having a background image that spans across the navbar and the content below it. Currently, the code separates the navbar component from the content component, making it tricky to achieve a unified background for both.
Below is a snippet of my main-layout.component.html:
<navbar></navbar>
<main>
<router-outlet></router-outlet>
</main>
Contents loaded in the router outlet include:
<hero-content></hero-content>
<general-information></general-information>
<contact-us></contact-us>
<footer></footer>
The goal is to have the background image cover behind both the <navbar> and <hero-content> components.