CSS background-image property not loading

Question

I am working on a website, and am currently on the homepage. I had a previously-written CSS header, and wanted to substitute an image for the background of the header <div> instead of a solid color, as in the previous design. I have a header image, in the img/header.jpg directory. I am loading the background image using the background-image property like so:

background-image: url(img/header.jpg)

The problem is, it does not load the image, the background is just silver (which is what the background of the <body> is set to).
Can anybody tell me what I am doing wrong here? (the browser I am testing it in is IE8, if that might have anything to do with it :)

Post the rest of your CSS. The relevant HTML would help too. — Andrew Charlton, May 02 '11 at 21:57
@Andrew Charlton yes, my div has a height and width set, the problem was just that my path wasn't configured right for where the file was. — Nate Koppenhaver, May 02 '11 at 21:59

score 12 · Accepted Answer · answered May 02 '11 at 21:55

12

If this is in a separate CSS file note that urls should be relative to the location of this CSS file. So for example if your CSS file is located in ~/styles/main.css the rule should be:

background-image: url('../img/header.jpg')

assuming the image is located in ~/img/header.jpg.

answered May 02 '11 at 21:55

Darin Dimitrov

1,023,142
271
3,287
2,928

@Nate Koppenhaver, I am glad I could help. – Darin Dimitrov May 02 '11 at 22:08

CSS background-image property not loading

1 Answers1

Linked