Clever Geek Handbook

Background doesn't work for div as it should

I have a weird path problem, this one works (on Windows):

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

But this one won't work (no image is displayed):

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

This page says exactly the opposite (not the first, but the second version should work): Background doesn't work for div

Does anyone know what the reason is?

+3


source to share


4 answers


The first url refers to the folder on the server that your HTML is used to render the page.

Example if you get:

www.mywebsite.com/index.html

it will consider: (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 like:

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

If you use "/" at the beginning, the path is not more relative, it always looks on the root website, like example 2 no matter where your html is.

+2


source


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

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

will point to the file in/source/website/css/test.css



Absolute paths show the relation to the entire path, so it /css/test.css

tries to find the file in the location/css/test.css

0


source


Depends on where your image and html file are.

'folder1/image.gif'

will look for folder1 located in the same path as your html file (relative path).

'/folder1/image.gif'

will look for folder1 starting at the base location of your server (absolute path).

0


source


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

image-1

0


source






More articles:


All Articles