There's a header image on a page that is controlled by CSS:
#photos-banner .navbar {
background-image: url("../images/bands/photos.jpg");
border-radius: 0;
border-bottom: 0;
padding-bottom: 8px;
background-repeat: no-repeat;
background-position: center;}
Then there's a navigation positioned on top of the image:
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="scroll active"><a href="#navigation">Home</a></li>
<!-- "The Code" Dropdown to go here -->
<li class="upper-links dropdown"><a>The Code <span class="fas fa-angle-down"></span></a>
<ul class="dropdown-menu">
<li class="profile-li"><a href="http://bobveale.com/Newest/about.html">About</a></li>
<li class="profile-li"><a href="http://bobveale.com/Newest/episodes.html">Episodes</a></li>
<li class="profile-li"><a href="http://bobveale.com/Newest/cast.html">Cast</a></li>
<li class="profile-li"><a href="http://bobveale.com/Newest/awards.html">Awards</a></li>
<li class="profile-li"><a href="http://bobveale.com/Newest/music.html">Music</a></li>
<li class="profile-li"><a href="http://bobveale.com/Newest/credits.html">Credits</a></li>
<li class="profile-li"><a href="http://bobveale.com/Newest/testimonials.html">Testimonals</a></li>
</ul>
</li>
<!-- /#"The Code" Dropdown to go to here -->
<li class="scroll"><a href="http://bobveale.com/Newest/videos.html">Video</a></li>
<li class="scroll"><a href="http://bobveale.com/Newest/photos.html">Photos</a></li>
<li class="scroll"><a href="http://bobveale.com/Newest/interviews.html">Interviews</a></li>
<!-- /#"Trips" Dropdown to go to here -->
<li class="upper-links dropdown"><a>Trips <span class="fas fa-angle-down"></span></a>
<ul class="dropdown-menu">
<li class="scroll"><a href="magic-egypt-tour-march-2018.html">March 2018</a></li>
<li class="scroll"><a href="magic-egypt-tour-sept-2018.html">September 2018</a></li>
<li class="scroll"><a href="magic-egypt-tour-march-2019.html">March 2019</a></li>
</ul>
</li>
<!-- /#"Trips" Dropdown to go to here -->
<li class="scroll"><a href="http://bobveale.com/Newest/courses.html">Courses</a></li>
<li class="scroll"><a href="contact.html">Contact</a></li>
</ul>
</div>
I'm attempting to make the image resize along with the navigation, but since the image is controlled by CSS, I can't seem to find a solution.
The page can be viewed here: if anyone wants to take a look.
I've tried various methods, but resizing an image in HTML code is easier (as demonstrated on that page) and I'm stuck.
Any thoughts or ideas are greatly appreciated.
Thanks, Bob