Header + Hero BG Wrapper
How can I accomplish the background image being on both the header + the hero?
(For context, maybe there is an argument that the single "Tech Book Club" logo shouldnt be inside header. But I wanted to simulate an example of a page having a proper header)
I'm self-taught, so a lot of my information comes from ChatGPT. And the only solution it's telling me, is to wrap both the header and the hero inside a div and then of course put a bg-image on the div.
The problem is, I'm 95% certain that doesn't work?
<div class="bg-wrapper">
<header>
<h1></h1>
</header>
<main>
<section class="hero"></section>
<section></section>
</main>
</div>
1. This wraps the entire code????
2. I can't put the closing div inside the main section, after the hero section.
3. I also can't remove the hero section from the main tag, and then just wrap the header + hero sect. As this takes the hero section of the main tag and that just absolutely cannot be write for accessibility + semantics.
Any assistance is greatly appreciated as this problem continues to occur in multiple projects and I can't find any information on the web on how to resolve it.
(For context, maybe there is an argument that the single "Tech Book Club" logo shouldnt be inside header. But I wanted to simulate an example of a page having a proper header)
I'm self-taught, so a lot of my information comes from ChatGPT. And the only solution it's telling me, is to wrap both the header and the hero inside a div and then of course put a bg-image on the div.
The problem is, I'm 95% certain that doesn't work?
<div class="bg-wrapper">
<header>
<h1></h1>
</header>
<main>
<section class="hero"></section>
<section></section>
</main>
</div>
1. This wraps the entire code????
2. I can't put the closing div inside the main section, after the hero section.
3. I also can't remove the hero section from the main tag, and then just wrap the header + hero sect. As this takes the hero section of the main tag and that just absolutely cannot be write for accessibility + semantics.
Any assistance is greatly appreciated as this problem continues to occur in multiple projects and I can't find any information on the web on how to resolve it.
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
