Transparent Header

[TurtleWolf1]

BasketPage
https://github.com

I’d like a transparent Nav Bar, so I assume I have to put it over the background to see anything behind it… but as soon as I do I get a large gap above the header

PageBasket

import React from 'react';

import { NavHeader } from '../components/NavHeader';

import './pageBasket.css';
import logo from '../stories/assets/Basketball.svg';

interface BasketPageProps {
  user?: {};
  onLogin?: () => void;
  onLogout?: () => void;
  onCreateAccount?: () => void;
}

export const BasketPage = ({ user, onLogin, onLogout, onCreateAccount }: BasketPageProps) => (
  <>
    {/* <header className="App-header bg-image" > */}

    <NavHeader
      user={user}
      onLogin={onLogin}
      onLogout={onLogout}
      onCreateAccount={onCreateAccount}
    />

    <header className="App-header bg-image" >

      <p>
        Edit <code>src/App.tsx</code> and save to reload.
      </p>
      <img src={logo} className="App-logo" alt="logo" />
    </header >
  </>
);

[Paul_Wilkins]

As this seems to primarily about presentation, I’ll move this over to the good people in the HTML+CSS forum.

[PaulOB]

If your header is transparent and there is nothing behind it then you will see nothing.

That in essence is your problem. Either you move the background image under your header so you can see it or you remove the header from the flow so that the background slides underneath.

Looking at your code your .bg-image class has the position:fixed commented out and I’m guessing that you need to reinstate that along with the left and top co-ordinates (0,0).

If I add that code in devtools and remove the padding from the body I get this design.

Of course it all depends on what you were trying to achieve.

[TurtleWolf1]

yes, this should work! thank you. I do want to keep the header fixed at the top… but I can start a different thread for that If I’m still stuck. This will be good for proof of concept right now. Thank you.

[TurtleWolf1]

This is the closest to what I want… but I can’t figure out what’s pushing it down so far?

[PaulOB]

Did you remember the top:0?

[TurtleWolf1]

I can’t find what it’s coming off of… I think it’s because I took a shortcut at the beginning and am tempted to start over. Having a <Header/> inside of a <header/> has a bad code smell and I’m probably clashing name spaces somewhere

[PaulOB]

You need top:0 here s shown where I added it in devtools.

Note that you still have padding on the body element so if you want the fixed header to match that image then you would need top:1rem, left:1rem, right:1rem and width:auto.

[TurtleWolf1]

ah, thank you! is much better now… exactly as you described it!