CODEWITHSUNDEEP
htmlcss
Erik James Robles
Erik James Robles

Reputation: 899

Background image URL cannot find the path on localhost

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">&times;</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");
});

Upvotes: 0

Views: 711

Answers (2)

Deadpool
Deadpool

Reputation: 8240

Issues:

  1. .popUpMain .box .image-area .img - Here you are calling .img class, in HTML, you have written "image" class. So, fix this.

  2. Remove opacity:0 from .popUpMain .box

  3. 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">&times;</div>
            <div class="image"></div>
        </div>
    </div>
 </div>

Upvotes: 1

Leeez0r
Leeez0r

Reputation: 11

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!

Upvotes: 1

Related Questions