The CSS background image is not displaying, but when I place it as a regular image, it does show up

My CSS code at the root of the file is set up to check the issue I'm about to explain:

.why-choose-us-image {
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.why-choose-us-image.bg1 {
    background-image: url(assets/images/bigdog.jpg);
}

I am then inserting that div on a background like this:

<div class="why-choose-us-image bg1">
                        
</div>

However, even though the image is there and appears when inserted as an image tag, it does not show up in the background. I've tried styling the div with "background-image" but still no luck. It's quite baffling.

Can anyone spot what I may be doing wrong in my code? Thank you for your help.

Answer №1

Give this a try, as it is important to verify the address for your files

.why-choose-us-image.bg1 {
    background-image: url(../assets/images/bigdog.jpg);
}

You could also consider this option since neither width nor height have been specified

.why-choose-us-image.bg1 {
    height: 118px;
    width: 118px;
 }

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

Align text to the right and left side

HTML file: <div id="home"> <b><p class="split-para">java<br><a href="j_temp.html" class="float">temperature converter in terminal</a> <br> <a href="j_palindrom.html" class="float">palindrome checker</a& ...

Tips on hiding the checkbox within the Material UI TextField input when using MenuItems with checkboxes

I've customized the MenuItems in a TextField of type Select to include checkboxes. However, when I select an item from the menu, the checkbox is also displayed in the input field of the TextField. Requirement: I want to hide the checkbox in the TextF ...

Tutorial on achieving full screen height for Bootstrap card within a column

I am working on a React grid layout with two cards, each in one column. My goal is to make the card on the left fill the entire column height (screen height), and if its content expands, have a scrollbar while keeping the second card intact and aligned to ...

Creating a series of adjacent dropdown menus with JavaScript, HTML, and CSS

I am encountering an issue while attempting to place multiple dropdown menus next to each other. I have included two categories as dropdown options in the header, but I am facing difficulty with one of them not functioning correctly. When I click on the no ...

List of options displayed in a dropdown/selectbox with a menu tree

Would it be possible to incorporate a treemenu within a dropdown/selectbox? My categories are structured like this: <ul id="example"> <li>Category1 <ul> <li><a href="http://www.autisticcuckoo.net">Category1 subcat ...

Guide on submitting a pre-filled form with data pulled from an array of objects using vue

My current school project involves creating a web app for dog walkers. I am currently working on a form to update the information of dogs owned by a user. This data is stored in an array of objects, where each object represents a dog's information. I ...

Using Jquery's prependTo method will add a display:block property to

Can't find a solution to this issue. This is the code snippet in question: var new_img = '<img id="' + drag_id + '" rel="' + drop_id + '" class="' + gallery_link + ' drop_out" src="' + drag_src + '" /& ...

Tips for achieving printing with the "Fit sheet on one page" option in JavaScript

Is there a way to print a large table of data with 200 or 300 rows all on one page, similar to the Online MS Excel print option 'Fit Sheet on One Page'? I attempted the code below: var tble = document.createElement("table"); tble.id = "tble"; d ...

What specific CSS element should be modified in order to effectively style the previews of WordPress posts?

Looking for some guidance here as a new website manager who is also a novice programmer. I need help fixing the issue of post teaser text overlapping with other elements on the page. My plan is to set a specific image size so that even if the featured imag ...

css, asp:listview and the use of the nth-child selector

Striving to enhance my CSS3 skills and move away from using table tags in my ASP.NET project, I am currently working with Visual Studio 2010, .NET 4.0, and VB.Net. Specifically, I am facing an issue with a listview where I am attempting to alternate the ro ...

What is the best location for storing buddypress css files?

Recently, I set up buddypress on a fresh WordPress installation and am interested in developing a child theme with personalized styles. Following advice from the buddypress codex, I copied the buddypress theme from plugins > buddypress > bp-template ...

Is there a way to customize the CSS of a Bootstrap 4 data table

I recently incorporated a library from Bootstrap Datatables into my project. However, I'm having trouble modifying the CSS for the search bar and 'Excel' button. Is there a way for me to customize it with my own CSS? https://i.sstatic.net/x ...

Is there a way to add a disappearing large space that vanishes when a line break occurs?

I am currently working on a website where I aim to have the name and airport code displayed in a centered title above an image of the airport. https://i.sstatic.net/Vwi2V.png The name and code will be separated by an em space: div.terminal-silhouette- ...

Resizable dynamic table in HTML

I am currently developing a flex table in HTML, constructed of multiple div elements. My goal is to make it resizable without using the traditional table tag. The layout of my table is similar to the one showcased in the following link. How can I achieve t ...

apply white-space:nowrap to a single column in a datatable

I am facing a challenge with my bootstrap datatable where one row (Product) contains a large amount of data and currently expands downwards, taking up a lot of space. https://i.sstatic.net/BryzM.png My goal is to make the Product column expand to the rig ...

Creating a search form in Bootstrap 4 that is centered and expands to full width only on small screens

I'm currently working with a bootstrap v.4 navbar that has 3 elements in it. I've managed to align the elements evenly so that the search bar is centered in the navbar. However, when it collapses it takes up the full width of the screen. Here is ...

Unable to delete a dynamically inserted <select> element by using the removeChild method

As someone who is new to coding web applications, I am currently working on a project that involves adding and deleting dropdowns dynamically. Unfortunately, I have run into an issue where the delete function does not work when the button is pressed. Her ...

I'm having trouble with my dropdown navigation menus - they keep popping back up and I can't seem to access

My website is currently in development and can be accessed at: The top navigation bar on the homepage functions properly across all browsers. However, there are three sections with dropdown submenus - About Us, Training, and Careers. These dropdown submen ...

Tips for creating space between flex columns without causing content to overflow

I am struggling with a simple 2-column flex setup where I want to add some margins between the columns. However, when I try to do this, the second column ends up overflowing outside of the .flex-row container. This issue becomes more prominent when I inclu ...

What is the best way to resize my JQuery image slider to match the width of the screen?

I've been working through a YouTube tutorial on creating a JQuery image slider, but I’ve hit a snag in my code and can’t seem to figure out the issue. My goal is to have the images span the full width of the screen, similar to how Apple features ...