Background-image not showing

user_2023646 0
Viewed 60313

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!

background background-image css html
6 Answers

I personally had the pathname and url syntax correct. The only issue was 

background-img: url("")

needing to be changed to..

background: url("")

And my background pattern revealed itself triumphantly.

user_87828290

As shown by other answers there can be many things that can prevent a background from showing. So even though the question is "Why is the image not showing?" a more general question is "How can I find out why my CSS-rule doesn't seem to take effect?"

I had the same or similar problem about background image not showing up and was able to find the answer by adding the "!important" -qualifier to my CSS-rule. That made the image appear, which made me realize there must be some other CSS-rules with higher priority that prevent this particular rule about background from taking effect.

That is a good trouble-shooting tip in general. If some CSS-rule doesn't seem to have any effect, try adding "!important" to it, and see if that helps. If so, look for other rules that are preventing your rule from taking effect.

user_16399180

Try omitting one of the leading dots (../). I had this exact same problem thinking two dots is the previous directory but it's actually two back.

user_90581460
Related