Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3

Thread: CSS image paths

  1. #1
    Regular Coder
    Join Date
    Jun 2010
    Thanked 8 Times in 8 Posts

    CSS image paths

    Let's say I have a document at http://www.mydomain.com/mydocument.html, which links to the style sheet at http://www.mydomain.com/css/mystyles.css, via the relative path css/mystyles.css.

    Let's say I have an image at http://www.mydomain.com/images/myimage.png. The document mystyles.css needs to set myimage.png as the background image of a div element, for the sake of argument.

    I have discovered that the browser interprets relative paths within mystyles.css as being relative to mystyles.css. How can I instruct the browser to interpret relative paths in css files as being relative to the document in which they are included?

    That would mean that instead of specifying url("../images/myimage.png") in mystyles.css, I would simply specify url("images/myimage.png").

    This would be useful because it wouldn't matter where I put mystyles.css, the url would always point to images/myimage.png, relative to the document that links to mystyles.css.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Halle (Saale), Germany
    Thanked 1,052 Times in 1,025 Posts
    You can only make the paths absolute but domain independent: /images/example.png
    The slash at the beginning tells the browser to look at the root directory of your site. This way you can move your stylesheet around on the server as you like. Only if you move the images directory elsewhere in the directory structure you would have to change the paths.

  • Users who have thanked VIPStephan for this post:

    XmisterIS (04-11-2012)

  • #3
    New Coder
    Join Date
    Mar 2008
    Thanked 1 Time in 1 Post
    if you have your html files and your css files in the same directory, you could then direct the css to images relative to the html. if the css and html were both in say a folder named 'home' and inside 'home' was an 'images' folder- you could do it that way. In general i havent found the issue that you're referring to to be much of an issue though imo


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts