CODEWITHSUNDEEP
htmlcss
Michael
Michael

Reputation: 13636

Why background-image is not displayed?

I create css class with background-image property and i put it to HTML but, the image is not displayed:

Here is css class:

.showLayers{
    background-image: url("http://localhost/mapserver2017/stdicons/GeomindIcons/showLayers.png");
    background-repeat: no-repeat;
}

.miniToolbarContant{
    cursor:pointer;
    width:20px;
    height:20px;
    transition: transform 0.3s;
}

Here is HTML element:

 <button type="button" class="button_air-medium">
              <img id="showLayers" class="miniToolbarContant showLayers"/></button>

But the image is never showed.

while if I change the HTML above like that:

<button type="button" class="button_air-medium">
                  <img id="showLayers" class="miniToolbarContant" src="../stdicons/GeomindIcons/showLayers.png"/></button>

Everything works fine.

Any idea why image is not displayed?

What I do wrong?

Upvotes: 1

Views: 73

Answers (4)

LogicalAnt
LogicalAnt

Reputation: 963

Its beacuse of your invalid file location. On your first img tag you didn't add file location while in the second you did. In case you don't know suppose that we have four directory (One, Two, Three,Four), (Three inside Two, Two inside One, Four inside One)
Like: 

One
|_Two
| |_Three   
|_Four

So when you are inside Three you can't access directory One or Two or Four. In order to access directory One you need to use ../../file_name here ../ used to access parent of current working directory.

Upvotes: 0

jukerok
jukerok

Reputation: 357

Just change in css .showLayers to #showLayers

Because you gave styling to a class called showLayers in CSS and then in HTML you were calling an ID called showLayers which does not exist.

Upvotes: 0

raksa
raksa

Reputation: 938

add background-size

.showLayers{
    background-image: url("http://localhost/mapserver2017/stdicons/GeomindIcons/showLayers.png");
    background-repeat: no-repeat;
    background-size: 20px 20px;
}

Upvotes: 1

temo
temo

Reputation: 708

Use background-image on button not on its child - img

Upvotes: 0

Related Questions