'CSS background-image not showing, but does when I apply style to the element in dev tools?

I am using Webpack to load an image to use as a background image. When I apply it using CSS, the div takes on any property I give it other than a background image..

.cover {
  background-image: url(../assets/images/childcarer_background.jpg);
  background-size: cover;
  min-height:500px;
}

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="cover">
      </div>
    </div>
  </div>
  <script src="homepage.js"></script>
</body>

When I inspect this in Chrome dev tools, the image is being loaded (I can access it directly) and if I copy the style from the .cover and apply it to element.style within Developer Tools, the style is applied as expected..

It will even overwrite the style when I apply it directly to the element...

enter image description here

This works, but obviously isn't sustainable.

If I inline the style, it works..

<div class="row" style="background-image:url(2769a294377fdc1af5fa011c9bedc6a0.jpg);">
  <div class="container">
  </div>
</div>

but if I try to make the stylesheet background !important...

enter image description here

It overwrites the background image with a blank background!

Why is this happening?

cssbackground-imagewebpack


Solution 1:[1]

Try adding !important to your background element. So...

.cover {
  background-image: url(../assets/images/childcarer_background.jpg) !important;
  background-size: cover;
  min-height:500px;
}

Solution 2:[2]

try but eliminating space between the colon and url. no space should solve it.

.cover {
  background-image:url(../assets/images/childcarer_background.jpg) !important;

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 jacturne
Solution 2 Jakub Kurdziel

Related Questions