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
21.2k59 gold badges74 silver badges93 bronze badges
asked Jan 26, 2011 at 22:42
Use .. to indicate the parent directory:
background-image: url('../images/bg.png');answered Jan 26, 2011 at 22:43
lonesomedaylonesomeday
227k49 gold badges310 silver badges313 bronze badges
3
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
4,5754 gold badges32 silver badges53 bronze badges
answered Nov 16, 2016 at 8:48
S.AkruwalaS.Akruwala
1,32811 silver badges8 bronze badges
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)
answered Jan 26, 2011 at 22:43
ThiefMasterThiefMaster
302k78 gold badges581 silver badges625 bronze badges
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
4,5754 gold badges32 silver badges53 bronze badges
answered Jan 26, 2011 at 22:53
jabojajaboja
2,0251 gold badge23 silver badges33 bronze badges
3
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
answered Mar 4, 2020 at 10:32
2
Supposing you have the following file structure:
-css --index.css -images --image1.png --image2.png --image3.pngIn 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
4,5754 gold badges32 silver badges53 bronze badges
answered Nov 1, 2018 at 10:11