背景图片不会显示

Question

I have a background image that I want to repeat across (repeat-x) however when I try to view the page, nothing shows up. I'm also using javascript to use a different CSS file for different times of the day, however I am sure that is not the problem because firebug shows that the CSS file was added to the head.

Edit: The problem is that the browser cannot find the file, however when I attempt to link to it, it still cannot find the file.

You can download the archive of the site here: http://cdn.duffcraft.net.adam543i.net/sitebkp-1845.zip Its only 200 or so kb. Nothing massive.

Answer 1

As there is no text in your header the div will not get displayed.Try following css

#header {
    background-image:url(img/night/night-time-tile.png);
    background-repeat:repeat-x;
    position:absolute;
    height:100px;  // Adjust height according to your image height 
    top:0;
    left:0;
}

Answer 2

And you are sure the path to your image file is correct? Does Firebug load the image?

Your file structure is probably like this

index.html
css/
    style.css
img/
    night/
        night-tile.png

Now, from your style.css you have to use a relative path to your image file. So not img/night/night-tile.png but ../img/night/night-tile.png . In your path it is looking for the image within the css directory, which is wrong.

==Update==

After downloading your code I found 2 more errors.

The first is that you forgot to add rel=stylesheet to the <link> element in which you link to your stylesheet. This way, browsers will not know it's a stylesheet.

The second is that you forgot to add a ; at the end of your first rule in your night.css , resulting in a parse error which causes the background rule not to be rendered.

Good luck fixing these issues!

Answer 3

If you have the Chrome browser, inspect the element where the background image should appear.

Hover over the background-image declaration in the firebug window

background-image:url(img/night/night-time-tile.png);

and you will see the full path of the image.

In the screenshot you can see the equivalent for the stackoverflow logo at the top of the page.

You can then click on the css declaration and change the url until you find the correct path for your image.

Answer 4

The element has no height (either explicit or from content).

This means there are no visible pixels of the element to see the image across.