CODEWITHSUNDEEP
htmlcssbackground-image
SunBathe
SunBathe

Reputation: 119

background: url(), background-image: url() is not working

I want to make an image button with HTML and CSS. So I tried background:url() but it's not working. I also tried these:

  1. background: url(res/play.png)
  2. background: url("res/play.png")
  3. background: url("/res/play.png")
  4. background: url(/res/play.png)
  5. background-image: url(res/play.png)

They all not working. This is my directory structure.

MyProgram
└ res directory
└ style.css
└ index.html

This is my code. The image is in res directory.

<table>
  <tr>
    <td>
      <button id="previousButton"></button>
      <button id="playButton"></button>
      <button id="nextButton"></button>
    </td>
    <td>
      <input type="range" id="volumeSlider" min="0" max="100" value="50" step="1">
      <button id="muteButton"></button>
    </td>
  </tr>
</table>

button#playButton {
  background: url(res/play.png);
}

the output

Upvotes: 0

Views: 445

Answers (1)

joohong89
joohong89

Reputation: 1271

you can try adding width and height. The background itself is not content, therefore nothing will be shown in your case.

button#playButton {
  background: url('res/play.png');
  height: 100px;
  width: 150px;
}

Upvotes: 1

Related Questions