CSS: Setting background-image in CSS

Question

What is the correct syntax when setting the background-image in CSS? In visual studio, there seems to be no problem in the background since it appears. But in the browser like IE or FF, the background does not appear. is there something i missed here?

syntax i am using is below (which i think is correct...)

#headerArea
{
    height: 150px;
    background-image: url('/images/bgimage.jpg');
}

the above is correct right?

Answer 1

Depending on your folder structure and where the CSS is located relative to the images it is using you will have to go up to the root level of the image directory and access it from there so you could maybe try something like

background-image: url('/../images/bgimage.jpg');

Answer 2

i got mine working w/ ../images/bgimage.jpg

how? i did NOT use quotes - ex:

background-image: url(../images/bgimage.jpg);

Answer 3

If you're testing on a local machine without using a web server (i.e. if the URL of your page in FF starts with "file://", that url wont work. You'll want to specify a relative path to the image because otherwise it'll be looking for that image at the root of your hard drive.

So if your files are like this:

/some/path/html/index.html
/some/path/html/images/bgimage.jpg

Your code will look like:

background-image: url('images/bgimage.jpg');