How to go up a level in the src path of a URL in HTML?
Solution 1
Use ..
to indicate the parent directory:
background-image: url('../images/bg.png');
Solution 2
Here is all you need to know about relative file paths:
Starting with
/
returns to the root directory and starts thereStarting with
../
moves one directory backward and starts thereStarting with
../../
moves two directories backward and starts there (and so on...)To move forward, just start with the first sub directory and keep moving forward.
Click here for more details!
Solution 3
Use ../
:
background-image: url('../images/bg.png');
You can use that as often as you want, e.g. ../../images/
or even at different positions, e.g. ../images/../images/../images/
(same as ../images/
of course)
Solution 4
In Chrome when you load a website from some HTTP server both absolute paths (e.g. /images/sth.png
) and relative paths to some upper level directory (e.g. ../images/sth.png
) work.
But!
When you load (in Chrome!) a HTML document from local filesystem you cannot access directories above current directory. I.e. you cannot access ../something/something.sth
and changing relative path to absolute or anything else won't help.
Solution 5
If you store stylesheets/images in a folder so that multiple websites can use them, or you want to re-use the same files on another site on the same server, I have found that my browser/Apache does not allow me to go to any parent folder above the website root URL. This seems obvious for security reasons - one should not be able to browse around on the server any place other than the specified web folders.
Eg. does not work: www.mywebsite.com/../images
As a workaround, I use Symlinks:
Go to the directory of www.mywebsite.com Run the command ln -s ../images images
Now www.mywebsite.com/images will point to www.mywebsite.com/../images
aateeque
Updated on March 05, 2020Comments
-
aateeque about 4 years
I am storing style sheets in {root}/styles while images in {root}/images for a website. How do I give the path in the style sheets to go look in the images directory for the specified images?
e.g. In
background-image: url('/images/bg.png');
-
aateeque over 13 yearsI read that elsewhere as well- but it doesn't work! (at least in Chrome)
-
ThiefMaster over 13 yearsIt does. However note that the location is relative to the CSS file's location, not the document embedding the CSS file.
-
aateeque over 13 yearsUpon rechecking, I can report that the local file system relative-paths by using
../
do work fine - or at least does work fine in this specific case! -
gabn88 over 8 yearsIt does work on linux and windows, not on mac (my experience)
-
1000Gbps over 6 years@ThiefMaster It should be if we're using only inline CSS
-
jaboja over 6 yearsLinks do not count here, as there is no same origin check for them. Also this answer is 6 years old so browsers may have changed a lot.
-
webzy almost 3 yearswhat is symlinks?
-
Leendert almost 3 years"A symlink (also called a symbolic link) is a type of file in Linux that points to another file or a folder on your computer. Symlinks are similar to shortcuts in Windows. Some people call symlinks "soft links" – a type of link in Linux/UNIX systems – as opposed to "hard links." " ------ from freecodecamp.org/news/…