Bootstrap Sticky Navigation Bar Background

Question

I have created a bootstrap boilerplate for myself. I have added a sticky navigation bar on top of the page and created a div afterward with 100vh. But when i added a image background on that div and make my nav bar transparent my image doesnt cover the background of my navbar. I have tried several things like getting my navbar inside that div but if so then it would not be sticky.

Could you plase tell me how can i do something like this. Thank you in advance

The Style I Want

<nav class="navbar navbar-expand navbar-light bg-light d-none d-lg-block sticky-top">
    <div class="container">  
        <a class="navbar-brand" href="#"><img src="assets/images/logo.webp" alt="" width="38" height="38"></a> 
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>   
        </button>
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                    Dropdown
                </a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li>
                        <hr class="dropdown-divider">
                    </li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>
<!-- Main Content -->
<div class="container-fluid">
  <div class="row">
    <div class="col first-content" style="background-color: blue;">
      1
    </div> 
  </div>
</div>

Answer 1

This will do it - I put an extra div at the bottom to show it's functioning

<div style="background-image: url('/image.jpg'); height: 100vh">   
    <nav class="navbar navbar-expand navbar-light bg-light d-none d-lg-block sticky-top">
    <div class="container">  
        <a class="navbar-brand" href="#"><img src="assets/images/logo.webp" alt="" width="38" height="38"></a> 
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>   
        </button>
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                    Dropdown
                </a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li>
                        <hr class="dropdown-divider">
                    </li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </nav>
    <!-- Main Content -->
    <div class="container-fluid">
        <div class="row">
            <div class="col first-content" style="height: 100vh">
            1
            </div> 
        </div>
        <div class="row">
            <div class="col first-content" style="height: 100vh">
            2
            </div> 
        </div>
    </div>
</div>