125

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');

TylerH
  • 20,799
  • 66
  • 75
  • 101
aateeque
  • 2,161
  • 5
  • 23
  • 35

7 Answers7

211

Use .. to indicate the parent directory:

background-image: url('../images/bg.png');
lonesomeday
  • 233,373
  • 50
  • 316
  • 318
97

Here is all you need to know about relative file paths:

  • Starting with / returns to the root directory and starts there

  • Starting with ../ moves one directory backward and starts there

  • Starting 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!

Neuron
  • 5,141
  • 5
  • 38
  • 59
S.Akruwala
  • 1,446
  • 12
  • 8
53

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)

ThiefMaster
  • 310,957
  • 84
  • 592
  • 636
10

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.

Neuron
  • 5,141
  • 5
  • 38
  • 59
jaboja
  • 2,178
  • 1
  • 21
  • 35
  • 1
    Upon 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! – aateeque Jan 26 '11 at 23:00
  • 1
    It does work on linux and windows, not on mac (my experience) – gabn88 Feb 13 '16 at 14:38
  • Links 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. – jaboja Dec 23 '17 at 23:28
1

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

Leendert
  • 119
  • 5
  • what is symlinks? – webzy Jun 11 '21 at 20:52
  • "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 https://www.freecodecamp.org/news/symlink-tutorial-in-linux-how-to-create-and-remove-a-symbolic-link/ – Leendert Jun 12 '21 at 21:19
0

Supposing you have the following file structure:

-css
  --index.css
-images
  --image1.png
  --image2.png
  --image3.png

In CSS you can access image1, for example, using the line ../images/image1.png.

NOTE: If you are using Chrome, it may doesn't work and you will get an error that the file could not be found. I had the same problem, so I just deleted the entire cache history from chrome and it worked.

Neuron
  • 5,141
  • 5
  • 38
  • 59
A.Tressos
  • 35
  • 7
-2

if you want to go to the root of the folder use / or ctrl+space if you want to go to the back folder use ../ and ctrl+space if it dont suggest and not use the live server if you use the ../

omar Ahmed
  • 1