Kevin Powell - CommunityKP-C
Kevin Powell - Community6mo ago
12 replies
Ares

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.
image.png
Was this page helpful?