CODEWITHSUNDEEP
htmlcssbackgroundbackground-image
kduan
kduan

Reputation: 659

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!

Upvotes: 14

Views: 62295

Answers (6)

Otto Cortes
Otto Cortes

Reputation: 1

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.

Upvotes: 0

Panu Logic
Panu Logic

Reputation: 2263

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.

Upvotes: 0

rand0m
rand0m

Reputation: 851

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?

Upvotes: 25

haej
haej

Reputation: 51

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.

Upvotes: 3

Damian Green
Damian Green

Reputation: 653

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

Upvotes: 2

user3037493
user3037493

Reputation: 312

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.

Upvotes: 3

Related Questions