Background Image Wont Show Up

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 d

Solution 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 heighttop:0;
    left:0;
}

Solution 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.cssimg/
    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!

Solution 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.

Solution 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.