Basic CSS question regarding background images for divs

I'm a programmer trying to learn some css and I've already run into a stumbling block.

I have the following HTML:

<div class="container">
    <div class="span-24 last">
        Header
    </div>
    <div class="span-4">
        Left sidebar
    </div>
    <div class="span-16">
        <div class="span-8">
            Box1
        </div>
        <div class="span-4">
            Box2
        </div>
        <div class="span-4 last">
            Box3
        </div>
        <div class="span-16 last">
            Main content
        </div>
    </div>
    <div class="span-4 last">
        Right sidebar
    </div>
    <div class="span-24 last">
        Footer开发者_JAVA百科
    </div>
</div>

In my css I have the following:

body {
    background-color:#FFFFFF;
}

div.container {
    background:url(/images/bck.jpg);
}

I just want to display an image for the background area for the container div but nothing shows up. If I remove the background section from the css and add background-color:#000000; then I see a black background for the container div.

What am I overlooking?

Most likely you are not specifying the correct path to the image:

background:url(images/bck.jpg);

Make sure that:

• You are specifying the correct path
• File name of the image is correct
• The image file is present in the images folder

Note: As I answered a question today, see how to specify the path with ../.

Most likely the image path is wrong. Remember that the image must be specified relative to the location of your CSS file. Let us say that you have a folder named styles with your CSS files and you have a folder named images with your images. Then you may need to specify:

 ../images/bck.jpg

in order to access that image.

I find that using Firebug for Firefox, the Web Inspector for Safari, or the Developer tools for MSIE 8 helps me diagnose issues like this. Inspect your div.container element and see what path shows up for your image.

Of course, if you have access to your server logs you could also check those to find what image was requested.

I recently had a problem just like this in where a jpeg image refused to show, but only in MSIE. I had to open up the image in photoshop and use the "Save for Web" again then reupload it. I'm not certain what the glich was, perhaps it was saved in an incompatible jpeg variation or was corrupt in some way, but that worked for me.