CODEWITHSUNDEEP
htmlcss
KenziDK
KenziDK

Reputation: 3

Why is my background-image not showing up on my page?

I can't seem to make that image appear in my logo square, why? background-color works perfectly well, but in this one the image won't appear and when I inspect with Chrome it gives that yellow warning + it bars it.

Can anyone help me figure it out?

I tried adding it in the HTML code already, if that helps..

.logo {

    margin:auto;
    width:150px;
    height:150px;
    background-image: url=('http://upload.wikimedia.org/wikipedia/commons/9/9c/Osaka_-_Night_View.jpg');
}
#logotext {
    color:red;
    position:absolute;
    margin-left:50px;
    margin-top:62px;
}
#navbar {
    background-color:black;
    height:50px;
    width:800px;
    margin:auto;
    margin-top:38px;
}
#navbartext {
    color:white;
    position:absolute;
    margin-top:15px;
    margin-left:370px;

}
#content {
    background-color:black;
    height:650px;
    width: 800px;
    margin:auto;
    margin-top:38px;
}
#contenttext {
    color:white;
    position:absolute;
    margin-left:370px;
    margin-top:300px;

}
#footer {
    background-color:black;
    margin:auto;
    height:75px;
    width:800px;
    margin-top:38px;
}
#footertext {
    color:white;
    position:absolute;
    margin-left:370px;
    margin-top:25px;
}

Upvotes: 0

Views: 66

Answers (5)

Bir
Bir

Reputation: 812

Check CSS: 

background-image: url('http://upload.wikimedia.org/wikipedia/commons/9/9c/Osaka_-_Night_View.jpg');

Upvotes: 0

Karuppiah RK
Karuppiah RK

Reputation: 3964

JsFiddle

remove = in your url=('')

it should be..

background-image: url('http://upload.wikimedia.org/wikipedia/commons/9/9c/Osaka_-_Night_View.jpg');

Upvotes: 0

Anoop
Anoop

Reputation: 173

This is the proper way to use the background-image property in css.

background-image:url('paper.gif');

So in your case it will be:

background-image:url('http://upload.wikimedia.org/wikipedia/commons/9/9c/Osaka_-_Night_View.jpg');

Upvotes: 0

Imran Bughio
Imran Bughio

Reputation: 4941

You made a syntax error, remove = from your code.

Wrong:

background-image: url=('http://upload.wikimedia.org/wikipedia/commons/9/9c/Osaka_-_Night_View.jpg');

Correct:

background-image: url('http://upload.wikimedia.org/wikipedia/commons/9/9c/Osaka_-_Night_View.jpg');

Upvotes: 2

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13978

change this class..

.logo {

margin:auto;
width:150px;
height:150px;
background-image: url('http://upload.wikimedia.org/wikipedia/commons/9/9c/Osaka_-_Night_View.jpg');
}

Upvotes: 0

Related Questions