CSS root directory

49
votes

I have a style sheet where I include background images.

background: url(../Images/myImage.png);

problem is, pages from different directories use this css!

My CSS files are in a CSS folder, images in an Image folder, and my html pages are in many different folders depending on their content and meaning to the website.

All my pages inherit this css as it is the MAIN theme.

The path used in the above example is a relative path. And obviously, this path only works for some of the pages. ALL i need is to link the images in the css from the ROOT folder. Therefore every path is correct no matter where the file is in the folder structure!

I have tried:

~/Images/myImage.png
./Images/myImage.png
/Images/myImage.png
Images/myImages.png

I don't think a root folder selector exists... but I hope it does :/

6
css
Just use an absolute path everytime, ie. example.com/Images/myImage.png – benhowdle89
No need for absolute paths, this shouldn't be an issue with an external stylesheet, as paths are always relative to the stylesheet itself. Are you putting the CSS code directly in the <head> instead? – Wesley Murch
@benhowdle89 don't, because when you change domains or place it in a sub-domain, everything is broken. I prefer the /path method. – jackJoe
<?php $_SERVER['HTTP_HOST']; ?> Done :) – benhowdle89

6 Answers

55
votes
/Images/myImage.png

this has to be in root of your domain/subdomain

http://website.to/Images/myImage.png

and it will work

However, I think it would work like this, too

  • images
    • yourimage.png
  • styles
    • style.css

style.css:

body{
    background: url(../images/yourimage.png);
}
15
votes

click here for good explaination!

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 subdirectory and keep moving forward

5
votes

I use a relative path solution,

./../../../../../images/img.png

every ../ will take you one folder up towards the root. Hope this helps..

1
votes

For example your directory is like this:

Desktop >
        ProjectFolder >
                      index.html
                      css >
                          style.css
                      images >
                             img.png

You are at your style.css and you want to use img.png as a background-image, use this:

url("../images/img.png")

Works for me!

-1
votes

In the CSS all you have to do is put url(logical path to the image file)

-1
votes

This problem that the "../" means step up (parent folder) link "../images/img.png" will not work because when you are using ajax like data passing to the web site from the server.

What you have to do is point the image location to root with "./" then the second folder (in this case the second folder is "images")

url("./images/img.png")

if you have folders like this

root -> content -> images

then you use url("./content/images/img.png"), remember your image will not visible in the editor window but when it passed to the browser using ajax it will display.