Html – how to place the Navbar component correctly and stick it when scrolling down

im using react and boostrap 5 to build a website, im still a novice learning css and bootstrap5. I need a little bit of help cause and i cant put the navbar over a background image and have it stick to the top when scrolling down. In my code i have put the navbar and image in the header of the App, dont know if thats correct or if i need to put that code in the body! Thanks for your time.

function App() {
  return (
    <div className="App">
      <header>
        <nav class="navbar navbar-expand-lg navbar-light">
        <div class="container-fluid">
        <div class="container">
            <div>
              <img class="bg-img" src="./Crazycrabscover2.png" alt="BG image"></img>
            </div>
          </div>

          
            </div>
            <div class="container">
              <a class="navbar-brand" href="#">
                  <img src="./logo.png" alt="Logo" width="30" height="24" class="d-inline-block align-text-top"/>
                  CrazyCrabs
              </a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbar">
                <ul class="navbar-nav ms-auto">
                  <li class="nav-item">
                    <a class="nav-link" href="#">Menu</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">NFTdrop</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Connect</a>
                  </li>
                </ul>
              </div>
           </div>
        </nav>
     </header>

CSS:

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.bg-img {
  height: 100vh;
  width: 100vw;
  object-fit: cover;
  filter: brightness(0.9);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}



.container {
  height: 50%;
  width: 300px;
}