Hero Section
i want to make my hero image expand with the content inside it
like the Story Graph
my effort got me to second pic and i am lost why it is behaving this way
16 Replies
can you show us the code?
<nav className="flex items-center justify-between absolute w-full top-4 px-4">
<a href="/">
<img src={logo} alt="logo" className="size-10" />
</a>
<ButtonAnchor
text="Join us!"
path="test"
className="text-black text-xl"
/>
</nav>
function App() {
const hederHeroClasses = [
"bg-[url(./assets/heroImg.jpg)]",
"bg-cover",
"mx-auto",
"w-full",
"py-12",
"h-48",
];
return (
<>
<div className="text-white bg-cyan-800">
<div className="opacity-10">
<div className={${hederHeroClasses.join(" ")}}></div>
</div>
<Navbar></Navbar>
<div className="px-6 ml-10">
<p className="text-2xl">Book Tracker</p>
<p className="text-3xl">
Because life's too busy to track your own books.
</p>
</div>
</div>
</>
);
}
like the second div ( where the text exist ) has its own background ( i can be wrong i am just thinking out loud )
that content can be put in a flex parent, taking the width and some height, and you align it to the center
flex parent ? u mean display flex on parent levle ?
i am sorry but i did not understand it
yeah, on whatever has the background
i will try to
and push the navbar and the content as its children
right ?
so whatever the space the children take the parent will expand to cover it
no, the navbar has nothing to do with it
it's a separated element
no idea
Unless I am missing something else what you need to do is to move your background image to the main parent element so that it becomes the background for the complete container. Then give it a width and height of 100% .
If you want/need to set opacity, you could define it on a pseudo element on the parent element.
i tried this approach and all the content is stuck at the top
set a minimum height and give it flex
I would do something like this:
- Place the background image on a pseudo element on the parent (use pseudo so that you can set opacity)
- Remove the absolute positioning on the nav.
- Add a top margin to the "Book tracker" element to push it down to where you want it.
okay imma exhaust your suggestions
thank you