背景图像未显示

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

try setting the background image size property

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

hope this helps?

Answer 2

put quotes around your image url

background-image:url("../images/House-03.png");

ETA : per comment below... quotes are indeed not required! just mentioned it here to troubleshoot the original question.

Answer 3

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.

Answer 4

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

Answer 5

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.

Answer 6

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.