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

[upper pier]

title

[next parrot]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[chrome bane]

Could you please explain a bit more of what the expected output should look like and more details?

@upper pier

[upper pier]

@chrome bane
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

current behaviour 👇
image needs to hit the left and top

[chrome bane]

Sorry im still confused

So the background image should also fill the background of the top navbar?

[quiet sun]

Could you provide some code so we can see how the image and nav bars are styled?

[upper pier]

https://gist.github.com/ridhwaans/f96e08b8ed984925a1c4cfbb9818d962

@chrome bane 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/
@quiet sun 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

[quiet sun]

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

[quiet sun]

also make sure there is nothing constraining it such as other relative divs or absolutes

[upper pier]

@quiet sun
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

{...}
<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}
{...}

[upper pier]

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

[quiet sun]

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>