Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Background-image not showing

I am trying to turn images that appear on the site using the tag into a background image. MY first code looked like this

Html:

<img class= "house" src="images/House-03.png" width="122px" height="118px"/>

CSS

.house {
display:block;
position:absolute;
float:right;
bottom:0;
right:0;

}

Now I'm trying to change it like this:

Html

<p class= "house"> </p>

CSS

.house {
    display:block;
    position:absolute;
    background-image:url(../images/House-03.png);
    width:122px;
    height:148px;
    float:right;
    bottom:0;
    right:0;
}

Except the image doesn't appear! Any help will be appreciated, Thanks!

like image 661
kduan Avatar asked Dec 07 '13 19:12

kduan


People also ask

Why is the background image not showing?

Make sure the image path is set correctly in the background-image url. Once you have made sure that your CSS file is linked correctly, also check that the image itself is set correctly. Again, you will want to open your code inspector in the browser to check.

Why background image is not showing in Div?

I recommend moving your css from the inline scope. Assuming that your . png file actually exists, try setting the background size and repeat tags. If that doesn't work, try checking in your browser's developer tools for the response codes and making sure that the url is correct.

Why is image not showing in HTML?

There are several possible reasons why your images are not showing up on your pages as expected: The image file is not located in the same location that is specified in your IMG tag. The image does not have the same file name as specified in your IMG tag. The image file is corrupt or damaged.


1 Answers

Make sure your image is accessible!

After a lot of frustration, it turned out that my problem had to do with the image not being accessible... You can always test out your code with another image on another site that is certainly accessible...

like image 133
Damian Green Avatar answered Sep 21 '22 05:09

Damian Green