Background not working for a div as it should

Question

I have a strange problem with paths, this one works (on Windows):

<div style="background:url('folder1/image.gif')...

But this one won't work (no image shows up):

<div style="background:url('/folder1/image.gif')...

Still this page says exactly the opposite (not the first but the second version should work): Background not working for a div

Anybody knowing what the reason might be?

Answer 1

Most modern browsers allow you to inspect elements on a web page. On chrome (or other modern browser) open the console and look for errors, if the image url is wrong, the console will indicate it as an error, moreover you will get the broken-image icon if you have specified the wrong url

Answer 2

The first is a relative path, the second is an absolute path

Relative paths show the file path from the calling context. So if your html file is /source/website/test.html, a relative path of css/test.css will point to a file in /source/website/css/test.css

Absolute paths show relate to the whole path, so /css/test.css tries to find a file at the location /css/test.css

Answer 3

The first url is relative to the folder in server what your HTML is used to render the page.

Example, if you get:

www.mywebsite.com/index.html

it will look into: (example 2)

www.mywebsite.com/folder1/image.gif

but if you are in another folder like:

www.mywebsite.com/subfolder/index.html

It will look in:

www.mywebsite.com/subfolder/folder1/image.gif

If you use a '/' in the beggin, the path isn't more relative, it always look in the root website, like exemple 2 no matter where your html is located.

Answer 4

Depends on where your image and html file are located.

'folder1/image.gif' will search for a folder1 that is located in the same path as your html file (relative path).

'/folder1/image.gif' will search for a folder1 starting from the base location of your server (absolute path).