Issue with resizing background image in CSS

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

Answer №1

Implement the CSS property background-size: cover to fully display an image within the designated element. However, embedding text directly into the image is typically discouraged.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Looking to set up a server that can manage SQL queries and serve HTML web pages efficiently

In my databasing course, I have the task of setting up a functional remote database. While I am confident in my ability to manage the database itself, I lack knowledge regarding web servers. My objectives include: - Creating a website where users can sel ...

Adjust the color of the label when the checkbox is marked, and make it red when the checkbox is left

Looking to create a customized checkbox due to challenges in styling the default HTML checkbox, I have attempted the following code. The checkbox functions properly when clicking on the label, but I am unable to change the border color of the label based o ...

What is the best way to customize the color of the icon in the <v-text-field>?

I have a <v-toolbar> component and I am trying to customize it by adding a search text field with a search icon in front: <v-text-field ...

Encountering difficulties with the functionality of Google Places API

I am attempting to incorporate the autocomplete functionality of Google Places API into a text field. Below is the code I have implemented: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script> <script ...

Tips on revealing the following div using jQuery

Can anyone help me figure out how to reveal the next div with a class of .hide when a Clickbox is clicked? Here is a link to the demo: http://jsfiddle.net/fvuqW/ This is the jQuery code I currently have: $(function(){ $('.form input[type=checkb ...

What causes the device pixel ratio to vary across different web pages on the same device and operating system?

I am curious about why device pixel ratio varies between different websites and operating systems. For instance, when using the same device, this site displays a different pixel ratio on Windows compared to Ubuntu. On Windows, the pixel ratio is 1.34 whi ...

Setting up a checkbox to accept either a 0 or 1 value from a database

I am trying to integrate an HTML table where each table data cell contains a drop-down menu and a checkbox. These elements are connected to a database table named "checkbox" which contains values of 1s and 0s. I want to dynamically display the check box as ...

elements overlap when styled differently

Hello all, I'm in need of some assistance with arranging the items on my webpage. As a beginner, I require detailed explanations as some things may be obvious to you but not to me :) Specifically, I am looking to enhance my header design. My goal is t ...

Enhance User Experience by Implementing Event Listeners for Changing Link Visibility Using mouseover and getElementsBy

I am new to JavaScript and struggling to find a solution. Despite searching online for fixes, none of the solutions I've found seem to work for me. I have spent hours troubleshooting the issue but I must be missing something crucial. Can someone plea ...

Can anyone tell me the best way to access the name attribute of an HTML element in TypeScript?

Currently, my code is utilizing the name attribute to verify whether the user has entered information in a specific field and validating the input. However, I am facing an issue where the submit button remains active even if there are empty fields presen ...

I am looking to serve static HTML files in Express.js while also retaining app.get() methods for handling server-side logic

It may sound trivial, but I am struggling with displaying HTML files within app.get() methods using Express. Most solutions I have found involve using app.use(express.static(__dirname + '/public'));, which limits server-side logic. What I want i ...

I'm looking for a recommendation for a canvas library that can handle basic 3D rendering

I'm looking to create a basic preview of a Minecraft character with the correct texture applied, without worrying about advanced animations or detailed lighting at this point. I prefer to use canvas rather than relying on WebGL, which is not widely su ...

Locate the checkbox label using CSS

Is there a way to replace the standard checkboxes with font-awesome icons without modifying the generated HTML or using jQuery? EDIT: The code includes JavaScript that prevents me from making changes. Also, note that the label text class can be -1 or -2 a ...

Styling multiple divs using CSS

What is the method for attaching CSS to sp-copyright? <div class="container"> <div class="row"> <div id="sp-footer1" class="col-sm-12 col-md-12"> <div class="sp-column "> <span class="sp-copyright"> ...

Changing CSS attributes with jQuery when conditions are met

After creating menus with expandable items that change style upon clicking, I encountered an issue where the styling changes were not being applied correctly. To address this problem, I followed Sushanth's suggestion and replaced $this with $(this), ...

Switch up the design on Bootstrap 4 navigation tabs

Trying to customize the appearance of the current tab in a nav-tabs setup has been a bit challenging. I've created a simple file to test this functionality. When a tab is clicked, the content switches correctly, but I'm struggling to apply specif ...

Tooltip remains visible even after formatting in highcharts

I have successfully hidden the datalabels with 0 values by formatting them. However, after formatting the tooltips for 0 valued data in a pie chart, there is an issue where hovering over the 0 valued portion shows a white box as shown in the picture. I hav ...

How come the h2::after element is positioned directly beneath the main h2 element, and with a margin-bottom?

I'm puzzled as to why the margin-bottom property in the main h2 element isn't affecting its "::after" element. Both are defined as block elements, so one margin should provide enough space between them. Even though the "h2::after" element has 0 m ...

Struggling to adjust the width of a DIV based on browser size and content with CSS

I'm working with a div that contains several 210x210 pixel images, and I want to adjust its margin from the left side. The goal is for the right side of the div to be just a few pixels away from the images, which will have their own margin set. Strang ...

Ajax: Why am I receiving an error response instead of a successful one?

It's puzzling why my code is triggering the error function instead of success. The console.log keeps showing me this: Object {readyState: 0, getResponseHeader: function, getAllResponseHeaders: function, setRequestHeader: function, overrideMimeType: f ...