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.
7 Replies
Yup that's how you do it
As you're starting out i recommend to not overthink accessibility. It's good that you're keeping it in mind but you shouldn't let your assumptions hinder you from building the basics
But divs are invisible to screen readers and they exist exactly for this purpose. It's an element made for styling that doesnt have any semantic meaning
So I would just control the height of the div with a hardcoded number? Seems like a pain for when you hit breakpoints, changing bg-wrapper height to some random number because the div wraps everything.
No just add padding and let the child elements use their intrinsic size
But then the entire page has the bg-image if it uses its intrinsic size because the wrapper is containing everything? I don't really understand what you're saying, sorry boss. Appreciate you trying 🫡
this is what i'm thinking
like i wrote in red you could also consider making the whole thing you shown us a single header
because it's not really main body information anyway is it
but honestly again i wouldn't overthink those semantic tags when you're starting out
there's not much point in giving only that text at the top the header tag if it's just one piece of text with no links or anything else
I 100% agree, the logo at the top shouldn't just go inside a header tag if theres nothing else in it. But like I previously stated I wanted to simulate an example of a page having a proper header. It would be very easy to just add a nav inside the header if required by the design.
However the content inside the section doesn't belong outside of the main tag. It is the hero, the primary pitch on the website, important content. So taking it out of the main tag is probably bad practice and not a solution I would want to learn to the common design layout of the header+hero bleeding together