<base> tag for CSS url ()

Question

I am looking for a way to link with a / "custom" URL. I use something like a local browser and / link to the / unix path (yea, os root path!) Path, which definitely does not match the location of my files.

Although I can solve this in html using <base> , I don’t understand if this works for CSS url (), or if there is something like that that allows me to specify full URLs.

I am open to any solution at the moment, even using SASS with some custom function that will rewrite any URL, replacing it with the full path.

To clarify what I ask, here is an example of my problem and how I would like to solve it:

 /mnt/projects/web/myproject/index.html ... <base href="/mnt/projects/web/myproject/" /> ... /mnt/projects/web/myproject/style.scss $base_url: "/path_to_root_folder_dinamically_fetched_on_client_pc/"; body { background-image: url("#{$base_url}mydir/myimage.png"); } 

The best option, obviously, if url(/mydir/myimage.png) works, but reading through the network, I realized that it is not.

Thanks for any suggestion.

Update 1:

Sorry, the answers are both good, but without context, it's hard to answer this question. Let me explain a little more: I use the software ( node-webkit ) to run the “website” (well, this application), locally. This is a more or less custom chrome example with some additional features.

The biggest problem is that node-webkit uses the file: /// protocol, so yes, the root path for the IS file protocol is actually the root of your os, C: / windows, / unix systems and this is not a problem, because that this is a local application (the user must somehow install it, I already had access to this system).

The secondary problem is that when you pack the application into one file, when the user launches it, it is unpacked in a temporary directory to actually launch the website through the protocol: ///, something like /tmp/randomnumber/index.html

Because of this, using / is not a valid option, however, since my style sheets are quite common (this is a complex application, I have something like layouts / something.css main.css and similar things), this should be a big problem always correspond ../ for each URL.

What options do I have? In this case, the javascript parameter is not as bad as you think. Another idea was to have a really small web server that should only serve static things, but it should be portable, cross-platform and not have to be installed.

I thought this could be solved using basic html and CSS, but it seems like it is not, while I can add a basic tag dynamically through javascript, there is nothing like that for CSS.

Answer 1

This is a javascript solution

 var absolute_path = "/abs_path/" document.body.style.background = "url(" + absolute_path + "mydir/myimage.png)" 

You can do this manually for each element that requires the url() attribute. It should be pretty simple to have a function that forwards a list of predefined selectors and modifies its background path by adding absolute_path .

Answer 2

Just put your CSS in your base path.

In this structure you should use the path: background-image: url(images/img1.png);

 /index.html (loads styles.css) /styles.css /images/img1.png 

In this structure you can skip the path: background-image: url(img1.png);

 /index.html (loads images/styles.css) /images/styles.css /images/img1.png 

If you use more paths, you can break your CSS and put each part in the path you need. Link from unix root is a serious security issue:

 <link src="/etc/passwd"/> 

You can create symbolic links to the desired folders.

Answer 3

I solved the same problem in a NodeWebkit application using relative paths. /. You probably know the location of your CSS relative to your HTML, so you can move up and down the tree as needed.

for example: ../../ css / my.css