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 li

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

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

Answer 4

My CSS file is in "Themes" folder. The images are saved in "Images" folder. Both "Themes" and "Images" are sub-folders under the root directory of my project.

In this case you should use

background-image: url(../Images/imageName.jpg);

Answer 5

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 6

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

how? i did NOT use quotes - ex:

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