55

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 :/

4
  • Just use an absolute path everytime, ie. example.com/Images/myImage.png Aug 12, 2011 at 9:16
  • 2
    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? Aug 12, 2011 at 9:22
  • @benhowdle89 don't, because when you change domains or place it in a sub-domain, everything is broken. I prefer the /path method.
    – jackJoe
    Aug 12, 2011 at 9:24
  • 1
    <?php $_SERVER['HTTP_HOST']; ?> Done :) Aug 12, 2011 at 9:38

6 Answers 6

64
/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);
}
4
  • 3
    does this only work if your website is hosted? I'm currently using visual studio 2010 to debug my website before uploading. Aug 12, 2011 at 9:18
  • 1
    @AlexMorley-Finch: I have no idea. Maybe yes
    – genesis
    Aug 12, 2011 at 9:19
  • 1
    @AlexMorley-Finch any absolute method only works if hosted on a server, not on a quick file preview (like previewing a file on the browser).
    – jackJoe
    Aug 12, 2011 at 9:23
  • 4
    After some research, Putting a forward slash before the path to define the route only works once the website is hosted with a domain. Because the '/' Purely gets replaced with the domain name during runtime. Hence it will not work on an unhosted html/css document:) POW! Aug 12, 2011 at 12:10
21

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

1
  • 9
    "... and keep moving forward" :') haha true, keep moving forward, never to look back, dwelling on the past is never good
    – ajax333221
    Jul 17, 2018 at 23:15
6

I use a relative path solution,

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

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

2
  • 3
    be careful, a server security rule may prohibit an excessively long sequence of ../../../ Mar 6, 2017 at 15:37
  • Putting a relative path with 6 parent-directory navigations is just unmanageable
    – Benj
    May 6, 2019 at 10:35
1

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

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.

-2

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.