background-image not working

Question

I have this in my HTML everything works except the background-image: 'images/Header.jpg'; Instead I see the grey color in the header but not the image.. I tried removing the grey color but still dont see the image...

#outerWrapper #header {
border-bottom: solid 1px #628152; 
font-size: 18px;
font-weight: bold;
line-height: 15px;
height: 115px;
background-color: Grey;
background-image: url('images/Header.jpg');

How can I make this work.. please help.. thanks

Answer 1

What is the path of your CSS file and the path of the image?

You must take in account that, when using url() in CSS, the path is relative to CSS file, not to the requested page.

Imagine you have the following files:

/website/index.html
/website/templates/main.css
/website/images/header.jpg

than the CSS must be:

.style{background-image:url(../images/header.jpg);} /* Noticed "../"? */

Answer 2

Have a look at your page with Firebug for Firefox. You may not be loading the image properly. You will also be able to play with the css on the fly if that's your issue.

Answer 3

Try changing the url to '/images/Header.jpg'

Answer 4

Sure you need the ' char? And maybe it is case sensitive and you have a mistake in the url.. Maybe background-image:url(images/header.jpg);