Background image URL cannot find the path on localhost - html

Question

I have an image located in the assets folder within the root directory. Within the assets folder, I have the img folder and in that I have the image in question. My scss folder is also in my root which houses my style.css and my style.scss. I have tried a variety of ways to get the image to appear but have already spent an hour trying to figure this out.
In my html, I have:
<div class="popUpMain">
<div class="box">
<div class="image-area">
<div class="close-button">×</div>
<div class="img"></div>
</div>
</div>
</div>
and my css for these elements are as follows:
.popUpMain {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1099;
background-color: rgba(0, 0, 0, 0.6);
visibility: hidden;
opacity: 0;
transition: all 1s ease;
}
.popUpMain.show {
visibility: visible;
opacity: 1;
}
.popUpMain .box {
// width: 750px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
opacity: 0;
margin-left: 50px;
transition: all 1s ease;
}
.popUpMain.show .box {
opacity: 1;
margin-left: 0;
}
.popUpMain .box .image-area {
position: relative;
}
.close-button {
position: absolute;
top: -20px;
right: -20px;
background-color: transparent;
color: #fff;
border: 3px solid #fff;
padding: 1px 19px 10px 19px;
border-radius: 50%;
background: #000;
font-size: 30px;
cursor: pointer;
}
.popUpMain .box .image-area .img {
position: absolute;
left: 0;
top: 0;
background-image: url(../assets/img/mesa-de-trabajo.png);
width: 100%;
height: 100%;
}
I am sure it is something simple that I am missing but for the life of my, I cannot see the forest through the tree. Any help would be appreciated.
Thank you in advance.
Edit: The reason I have some hidden properties is in my javascript call here:
const popUpControl = document.querySelector('.popUpMain');
const close = document.querySelector('.close-button');
window.addEventListener("load", function() {
showPopup();
});
function showPopup () {
const timeLimit = 2; // seconds
let i = 0;
const timer = setInterval(function() {
i++;
if(i == timeLimit) {
clearInterval(timer);
popUpControl.classList.add("show");
}
console.log(i);
}, 1000);
}
close.addEventListener("click", function() {
popUpControl.classList.remove("show");
});

Answer 1

It depends on both your stylesheet and image location. Your syntax is correct, but you need to remember you're calling the image from the stylesheet location.
Example:
Root
- css
- styles.css
- assets
- img
- yourImage.jpg
In this case, in your stylesheet you would write
background: url(../assets/img/yourImage.jpg);
Take a look at your stylesheet location and adjust!

Answer 2

Issues:
.popUpMain .box .image-area .img - Here you are calling .img class, in HTML, you have written "image" class. So, fix this.
Remove opacity:0 from .popUpMain .box
Remove visibility: hidden; opacity: 0; from .popUpMain
.popUpMain {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1099;
background-color: rgba(0, 0, 0, 0.6);
transition: all 1s ease;
}
.popUpMain.show {
visibility: visible;
opacity: 1;
}
.popUpMain .box {
// width: 750px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin-left: 50px;
transition: all 1s ease;
}
.popUpMain.show .box {
opacity: 1;
margin-left: 0;
}
.popUpMain .box .image-area {
position: relative;
}
.close-button {
position: absolute;
top: -20px;
right: -20px;
background-color: transparent;
color: #fff;
border: 3px solid #fff;
padding: 1px 19px 10px 19px;
border-radius: 50%;
background: #000;
font-size: 30px;
cursor: pointer;
}
.popUpMain .box .image-area .image {
position: absolute;
left: 0;
top: 0;
background-image: url("https://picsum.photos/200/300");
width: 500px;
height: 500px;
}
<div class="popUpMain">
<div class="box">
<div class="image-area">
<div class="close-button">×</div>
<div class="image"></div>
</div>
</div>
</div>