CSS Background URL

Question

Can someone help explain how exactly the CSS URL for a background image works? How exactly does the CSS know where to start looking up the URL? for example I have these 3 URLs

Answer 1

The first one says to look for a image folder in the same directory in which the CSS file is located and then point out the background.jpg file.

The second one says to go into the root folder then look for an image folder and then look for a file named background.jpg.

The third one says to go to a domain then look into newWebSite folder then in an image folder then point out the file background.jpg.

It totally depends on the structure of your directories that what URL to use and when. If your CSS and Image folders are in the same directory then you may write the URL like this:

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

The ../ here will tell CSS file to go back one directory and then go into the image folder.

If your image folder is a subdirectory of the css folder then you may write like this:

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

If you want to include a file from another website then you may write like this:

background-image: url(http://www.example.com/background.jpg);

If you want to locate a folder that is in your root directory of your website then you may write like this:

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

The / at the first here indicates the URL to go into the very first parent directory and then look for an image folder.