0

I know that this question has been asked and answered many times. I have viewed and tested the answers to all of those questions, but still I cant get it working.

I have a div in my HTML Document. I styled it to have a specific height and width. When I give it a background color, I can clearly see it. But If I use background image property, no image is shown.

Here is the HTML : 

<body>
<div id="div">
    <div id="playButt"></div>
    <canvas id="canvas" width="800" height="600"></canvas>
</div>
<script src="Js/Init.js"></script>
<script src="Js/Menu.js"></script>
</body>

And the Css :

#playButt {
   position: absolute;
   width: 100px;
   height: 100px;
   display: block;
   background-image: url("Imgs/User Interface Icons/PLAY icon normal.png");
}

My document structure is like this :
HTML5\Project FG\Imgs\User Interface Icons\PLAY icon normal.png

The css file is properly linked with the HTML file and resides at the same level of the HTML file inside the folder Project FG.

What is it that I am doing wrong ? How can I correct it ?

Thanks.

Delta_Shadow
  • 13
  • 1
  • 3
  • 1
    Spaces can't get parsed like that, you have to use `%20` instead of them also: I'd avoid using capitals in your paths/filenames – roberrrt-s Aug 31 '16 at 08:19
  • http://stackoverflow.com/questions/2856294/css-and-jquery-spaces-inside-image-name-break-code-of-url. (...User%20Interface%20...) – wazz Aug 31 '16 at 08:27
  • 1
    Rather than `avoid using capitals` which is **correct**, a more accurate help would be that you (Delta_) should be aware that most server systems file paths are *case sensitive* – Martin Aug 31 '16 at 08:27
  • Which is entirely true, the 'not use capitals' is merely a personal preference ofcourse @Martin – roberrrt-s Aug 31 '16 at 13:47

1 Answers1

1

Make sure you file name has not white spaces so convert PLAY icon normal.png to something like PLAY_icon_normal.png.

Also make sure that your HTML is pointing to the right file.

You can use the following list as reference when creating your URL:

   /   = Root directory
   .   = This location
   ..  = Up a directory
   ./  = Current directory
   ../ = Parent of current directory
   ../../ = Two directories backwards
GibboK
  • 71,848
  • 143
  • 435
  • 658