Html css背景图像无法调整大小

我在页面上有一个来自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;}

然后在图像的“顶部”有一个导航：

<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="#blog">Order</a></li>  -->
                    <li class="scroll"><a href="contact.html">Contact</a></li>
                </ul>
            </div>

我试图让图像调整与导航同步，但由于图像来自css，我似乎不知道如何做

页面在这里：如果有人感兴趣

我已经尝试了很多方法，当图像在html代码中时（从该页面可以看到），很容易让它调整大小，但我被难倒了

想法，想法

非常感谢

---

Bob

使用

背景尺寸：cover

在元素中填充图像。但将文本包含在图像中并不是一个好的做法