Vitor Barreto
Vitor Barreto

Reputation: 177

CSS Header image not showing

I have the following CSS code to show an image on the header, but the image is not showing.

#header {
    margin:          0 auto;
    width:           830px;
    height:          250px;    
    background-image: url("images/banner.jpg");
    background-repeat:no-repeat;
}

Problem is, nothing is showing.

enter image description here

Can anyone help me?

Thank you.

Upvotes: 2

Views: 4964

Answers (2)

Chtioui Malek
Chtioui Malek

Reputation: 11515

Possible causes :

  1. Verify that your the html element has an id "header" (not class and not a header element).

  2. The image path is relative to the css file, so to match your css code you should find a directory called images in the same directory as your css file.

  3. Check that the image file banner.jpg actually exists.

also, check your browser console for error messages.

Upvotes: 2

P.S.
P.S.

Reputation: 16384

Everything is OK, except you path to image, see:

#header {
    margin:          0 auto;
    width:           830px;
    height:          250px;    
    background-image: url("http://cdn2.thr.com/sites/default/files/2012/12/img_logo_blue.jpg");
    background-repeat:no-repeat;
}
<div id="header"></div>

If you will share the structure of your project, I can help you to write the right path to image.

Upvotes: 1

Related Questions