Show background image in a div underneath navbar - html

Question

New to bootstrap.
I want to show a background image underneath the NavBar within a div in bootstrap. For some reason the image in the code below is not rendering correct height. How do i achieve the correct height whilst at the same time maintaining the responsiveness of the image?
Also, how can we change the color of the NavBar on scroll? Nothing happens with the code below when I scroll.
Html:
<nav class="navbar navbar-expand-lg bg-secondary fixed-top text-uppercase" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top"> <img src="img/logo-clear.png" alt="logo" style="width:160px;"></a>
<button class="navbar-toggler navbar-toggler-right text-uppercase bg-primary text-white rounded" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item mx-0 mx-lg-1">
<a class="nav-link py-2 px-0 px-lg-3 rounded js-scroll-trigger" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item mx-0 mx-lg-1">
<a class="nav-link py-2 px-0 px-lg-3 rounded js-scroll-trigger" href="#about">About</a>
</li>
<li class="nav-item mx-0 mx-lg-1">
<a class="nav-link py-2 px-0 px-lg-3 rounded js-scroll-trigger" href="#services">Services</a>
</li>
<li class="nav-item mx-0 mx-lg-1">
<a class="nav-link py-2 px-0 px-lg-3 rounded js-scroll-trigger" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Header -->
<div class="page-header bg-primary" style="background-image: url(./img/1.jpg);">
<p class="text-center text-uppercase text-secondary mb-0" id="mainText">Portfolio</p>
</div>
</div>
CSS:
/*for navbar*/
.bg-secondary {
background-color: transparent !important;
/* background-color: transparent !important; */
}
.bg-secondary.scrolled{
background-color: #333300 !important;
}
.page-header{
background-size: cover;
height: auto;
}
JS:
<script>
$(window).scroll(function(){
$('nav').toggleClass('scrolled', $(this).scrollTop() > $('nav'));
});
</script>

Answer 1

Something like this? https://jsfiddle.net/wwWaldi/nrysp61w/10/
You gotta set the height to your header, (i changed the url of the header for demo)
height: 300px;