We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!

Answered path in css

    • 51708
    • 3 Posts
    Hello everyone, I'am new in modx, right now i am making my first project on this CMS.
    I have a question about path in CSS file.
    My template path is: /assets/templates/template
    It contains css, js files and pictures.
    Main css file called main.css and its path is /assets/templates/template/main.css
    I have a problem with path inside this css, for example I write this code:
    background-image: url(img/bg.jpg);

    And I expect to see an image located here: /assets/templates/template/img/bg.jpg
    But, when I saw a sourse code of a page, I see this path: modx/img/bg.jpg, where modx, as I correctly understand is a [[++site_url]]
    In my template I have this line of code:
    <base href="[[++site_url]]" />

    So, I need to write a full path for my image for its work.
    background-image: url(assets/templates/comfortable-house/img/bg.jpg);

    But, I think its not good way.
    Is it possible to write path regarding the palcement of my css file?
    P.S. I am not a fluent english speaker, sorry for my mistakes.

    This question has been answered by sottwell. See the first response.

    • As long as you have the base href meta tag, you can use relative URLs to images, MODX will automatically add the site_url to the beginning of the relative URL.

      A link to an image in a CSS file is different; it is relative to that CSS file. So if your CSS file is at assets/templates/comfortable-house/css/main.css, then the URL would be something like
      background-image: url(../img/bg.jpg);


      This has nothing to do with MODX, it is the same with any links to fonts or images in a CSS file, relative URLs are relative to that .css file.
        Studying MODX in the desert - http://sottwell.com
        Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
        Join the Slack Community - http://modx.org
        • 51708
        • 3 Posts
        My main.css file located in a root of /assets/templates/template directory
        My images located here: /assets/templates/template/img/
        Because of it I am using this path in css property
        background-image: url(img/bg.jpg);

        But i see this in a sourse of HTML
        modx/img/bg.jpg

        • discuss.answer
          A relative URL for an image using <img...> tags in content are relative to the index.php file. A URL for an image used by a CSS file for a background is relative to that CSS file. An image request made by a CSS directive is never processed by MODX, except when the image requested by the CSS directive is not found, in which case the usual MODX not-found page will be returned.

          The browser gets the HTML, from which it gets other files to request, such as .js files, .css files, and image files of various types. These requests, if the URLs are correct, are found by the web server and returned. MODX is never invoked.

          When the .js or .css is parsed by the browser, any files referenced by these are requested by the browser, and if the URLs are correct are returned by the web server, again without invoking MODX. MODX is only invoked via its index.php file in the case of files or directories that the web server cannot find.

          So relative URLs are relative to whoever requested them. If it's an image file requested by MODX (the index.php file) then it's relative to your installation root, where the index.php file is. If it's requested by your .css file, then it's relative to that .css file.

          Files requested by Javascript can be tricky; these are often file system paths and not URLs at all - which is a whole different matter.
            Studying MODX in the desert - http://sottwell.com
            Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
            Join the Slack Community - http://modx.org
            • 51708
            • 3 Posts
            sottwell, Thanks!
            The problem trully was in js code. I was using this to plug my css file:
            var ms=document.createElement("link");ms.rel="stylesheet";
            	ms.href="/assets/templates/template/main.css";document.getElementsByTagName("head")[0].appendChild(ms);

            The problem of this method is a wrong relative URL of css file.
            The solving is just using rel tag in head
              • 3749
              • 24,544 Posts
              Is there some reason you don't want to just put the CSS line in your template(s)?
                Did I help you? Buy me a beer
                Get my Book: MODX:The Official Guide
                MODX info for everyone: http://bobsguides.com/modx.html
                My MODX Extras
                Bob's Guides is now hosted at A2 MODX Hosting