Background-image not showing

Question

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!

Answer 1

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...