Next.js Discord

Discord Forum

In an app router app, how do you make a hero section full bleed the page & override the layout?

Unanswered
Philippine Crocodile posted this in #help-forum
Open in Discord
Philippine CrocodileOP
title

16 Replies

Netherland Dwarf
Could you please explain a bit more of what the expected output should look like and more details?
@Philippine Crocodile
Philippine CrocodileOP
@Netherland Dwarf
the rootlayout layout.ts has a sidenav and a header/menubar component like the pic
the hero section component lives in the page.ts
if the hero section gets a background image I need it to:
- fill the component from the top left to right corners like a full bleed banner,
- the layout becomes an overlay and there should be no white space
Philippine CrocodileOP
current behaviour 👇
image needs to hit the left and top
Netherland Dwarf
Sorry im still confused
So the background image should also fill the background of the top navbar?
Iischeese
Could you provide some code so we can see how the image and nav bars are styled?
Philippine CrocodileOP
https://gist.github.com/ridhwaans/f96e08b8ed984925a1c4cfbb9818d962
Philippine CrocodileOP
@Netherland Dwarf image should be positioned in the top left corner, behind the header & sidebar. Right now it is not. For example, like this https://stripe.com/
@Iischeese gist has the code for layout, page & component
hack - offset or absolute position the image in tailwind to the top left corner
cleaner - make the hero section conditional and two variations of layout
Iischeese
try setting top-0 left-0 and adjust your z-index to have the depth you'd like. make sure the backgrounds of components are transparent so you can see the background behind it. Let me know if this works
Philippine CrocodileOP
@Iischeese
I removed bg-background from the header and sidebar but they did not become transparent. Chrome say they are transparent which seems wrong.
I used absolute top-0 left-0 on the image but it at the top left of the nearest ancestor / relative div, not at the top left of the whole screen.
I tried -y-translate-14 and -x-translate to offset the image but it goes behind the header menubar
Philippine CrocodileOP
{...}
<header className="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
</header>
<div className="relative overflow-hidden py-24 lg:py-32">
        <img
          className="absolute top-0 left-0 object-center object-cover w-full h-full"
          src={imageUrl}
          alt="Background"
        />
</div>
{other children}
{...}
Philippine CrocodileOP
got it working with this code
<header/>
    <>
      <div className="z-9 pb-[56.25%]">
        <img
          className="absolute top-0 left-0 object-center object-cover w-full"
          src={imageUrl}
          alt="Background"
        />
     </div>
    </>
<main/>

its not perfect, but it sits at the top behind sidebar and header with their bg-background removed and a lower z-index
Iischeese
try this 
<main className="w-screen h-screen text-white">
            <div className="-z-10 absolute top-0 left-0 h-[60vh] w-screen bg-blue-500 [clip-path:polygon(0_0,100%_0%,100%_50%,0_100%)]" />
            <header className="flex w-screen justify-between items-center p-2 px-5">
                Stripe
                <div className="flex gap-4">
                    <button className="border border-white rounded-full px-5 py-3">Login</button>
                    <button className="border border-white rounded-full px-5 py-3">Pricing</button>
                </div>
            </header>
        </main>
let me know if that works