Background-image not loading image with correct file path-CodePudding

I am new to JS and I'm making a game in HTML5/JS, and I need to set a background image for a div that is nested in another div, without overflow. I put the background-image property on the element, but the background is not appearing.

I haven't been able to find any other examples of this online, or how to fix it. The background-image property is showing up in the browser, and the file paths are correct.

HTML:

<div>
  <div id="DivId" >
  </div>
</div>

CSS:

.DivClass {
  background-color: rgba(20, 20, 20, 0.75);
  background-repeat:no-repeat;
  background-size:47%;
  background-position: center;
  background-repeat: no-repeat;
}

#DivId {
  background-image: url(../InventoryAssets/Key-trimmy.png);
}

CodePudding user response：

I suggest giving a height value to the div. Background images are not HTML content themselves. For example:

 `#DivId {
      background-image: url(../InventoryAssets/Key-trimmy.png);
      height: 500px;
    }

CodePudding user response：

In my opinion you should keep the file in the same folder in which you html file is there and then try it for example

#DivId {
background-image: url(Key-trimmy.png);
}

I hope this helps you or try

document.body.style.backgroundImage = "url('Key-trimmy.png')";

you can also add image in body tag in html

<body style="background-image: Key-trimmy.png;">