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

That's correct syntax. Have you checked whether the image is in the right location?

Answer 2

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');

Answer 3

Are you certain about the / at the beginning of the url? Aren't you trying to reach the image in the "images" subdirectory... which would imply url('images/bgimage.jpg')?

Answer 4

If it is a relative path, remove the heading "/" in the url path?

Answer 5

And remember, relative path is relative to the CSS sheet.

Answer 6

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');