CSS: CSS background image customization

Question

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

Syntax

which I use is below (which I consider correct ...)

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

Is this right?

Answer 1

Depending on the structure of your folder and the location of the CSS relative to the images they use, you will need to go to the root level of the image directory and access it so you can try something like

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

Answer 2

If you are testing the local machine without using a web server (i.e. if the URL of your page in FF starts with " file:// ", this URL will not work. You need to specify the relative path to the image, because otherwise it will look for this image in the root directory of your hard drive.

So, if your files look like this:

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

Your code will look like this:

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

Answer 3

The correct syntax. Have you checked if the image is in the right place?

Answer 4

I got a job with w /../ images / bgimage.jpg

as? I have NOT used quotes - ex:

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

Answer 5

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

Answer 6

If this is a relative path, remove the "/" header in the url path?

Answer 7

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

Answer 8

My CSS file is located in the Themes folder. Images are saved in the Images folder. Both Themes and Images are subfolders in the root directory of my project.

In this case you should use

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