Having a hard time positioning image behind Bootstrap navbar (Z-index) - html

Question

This is the navbar layout
<header id="navigation-bar" class="nav-header">
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">
<img src="images/logo.svg" alt="logo-icon">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">How we work <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item item2 active">
<a class="nav-link" href="#">Blog<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item item2 active">
<a class="nav-link" href="#">Account <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link nav-btn-link" href="#"><button class="nav-btn btn btn-outline-dark">View Plans</button><span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
</header>
bg-img1 is the image I'm trying to position behind navbar:
<section id="Heading">
<img class="bg-img1" src="images/bg-pattern-intro-right-desktop.svg" alt="bg-pattern-left">
<div class="container-1">
<div class="heading-text">
I tried putting a header around the navbar and positioning the z-index but it doesnt seem to do it justice.
.nav-header {
position: relative;
padding: 1%;
z-index: 10000;
}
and this is how I positioned my image:
.bg-img1 {
position: absolute;
right: 0;
width: 40%;
top: 3%;
z-index: 2;
}

Answer 1

You are doing everything right but because you are giving src to your img attribute, as a result of which it will be treated as an image which will not be appearing behind the navbar but in front.
Instead of giving src to your image, you can use CSS background property for your img attribute which will make the img appear behind the navbar. So no need of any z-index
.bg-img1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(https://images.unsplash.com/photo-1590845947667-381579052389?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60) no-repeat;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<section id="Heading">
<img class="bg-img1" alt="bg-pattern-left">
<div class="container-1">
<div class="heading-text">
</div>
</div>
</section>
<header id="navigation-bar " class="nav-header">
<nav class="navbar bg-dark navbar-expand-lg">
<a class="navbar-brand" href="#">
<img src="https://placehold.it/20x20" alt="logo-icon">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">How we work <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item item2 active">
<a class="nav-link" href="#">Blog<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item item2 active">
<a class="nav-link" href="#">Account <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link nav-btn-link" href="#"><button class="nav-btn btn btn-outline-dark">View
Plans</button><span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
</header>