CSS背景图像无法调整大小

Question

我在来自 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，我似乎不知道该怎么做。

如果有人感兴趣，该页面在这里：http://bobveale.com/Newest/csstest.html。

我已经尝试了很多东西，当图像在 html 代码中时，很容易调整它的大小（如可以在该页面上看到的那样），但我很难过。

想法、想法？

非常感谢 鲍勃

Answer 1

使用background-size: cover 在元素中填充图像。但是在图像中包含文本并不是一个好习惯。