Question

I’m essentially trying to create a div which is an image of a button, and when the user clicks it a function is executed. For some reason the div is not showing up at all! What in the world am I setting wrong?

CSS:

#customizeButton
{
  background-image:url('images/customizeButton.png');
  position:absolute;
  top:35%;
  left:25%;
  width:370px;
  height:350px;
  background-repeat:no-repeat;
  -webkit-background-size:100% auto;
  z-index: 150;
}

HTML:

<div id ="customizeButton"></div>

It has to be something with the CSS side. I’ve got almost identical code for another “button” which I use as an exit button, but it uses a text character instead of an image. It works just fine…

Here’s the code for reference:

CSS:

#statSheetExitButton
{
  width: 40px;
  height: 40px;
  position: absolute;
  font-weight: bold;
  top: 17%;
  left: 74%;
  font-size: 150%;
  font-style: normal;
  color: black;
  z-index: 50;
}

HTML:

<div id ="statSheetExitButton">X</div>

---

And again, the question is why the customizeButton is not showing up.

EDIT: ANSWER The problem was that I had the html code for my initial Stat Sheet components in another html file in the same folder, and my program was only listening to that file.

Answer 1

Is this the correct path to your image?

background-image:url('customizeButton.png');

This would only work if the img was in the same directory as the css.