<base> tag for CSS url() [duplicate]

Question

This question already has answers here:

Specifying base url for css (3 answers)

Closed 6 years ago.

I'm looking for a way to reference with / a "custom" url. I'm using something like a local browser and the / path references to / unix path (yea, o.s. root path!), which is definitely not the same place where my files are placed.

While I can solve this in html with <base> I don't understand if this works for CSS url() too or if there is something similar that allows me to specify full urls.

I'm open to any solution at this point, even using SASS with some custom function that will rewrite any url replacing it with the full path.

To clarify more what I'm asking, here is an example of my issue 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 is obviously if url(/mydir/myimage.png) works, but reading through the net I understood it doesn't.

Thanks for any suggestion.

Update 1:

Sorry, the answers are both good but without context, it's hard to answer to this question. Let me explain a bit more: I'm using a software (node-webkit) to run a "website" (well, it's an app), locally. This is more or less a custom chromium instance with some additional features.

The biggest problem is that node-webkit uses the file:/// protocol, so yes, the root path for file protocol IS actually the root of your o.s., C:/ on windows, / on unix systems and it's not directly an issue because this is a local application (the user must have installed it in some way, I already had access to this system).

The secondary problem is that when you package the application into a single file, when the user runs it, it is unpacked in a temp directory to actually run the website through the file:/// protocol, something like /tmp/randomnumber/index.html

Because of this, using / it's not a valid option, however because my stylesheets are spread enough (it's a complex app, I have something like layouts/something.css main.css and similar things), it's a big issue having to rewrite always the ../ for every url.

What options do I have? In this case, the javascript option is not that bad as you may think. The other idea was running a really small webserver, which should only serve static things, but this needs to be portable, cross-platform and shouldn't need install.

I thought it was possible to solve this with basic html and CSS, but it looks like it's not, while I can add "base" tag dinamically through javascript, there isn't something similar 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 on every element that requires the url() attribute. It should be fairly simple to have a function that goes over a list of predefined selectors and modifying its background path by prepending absolute_path.

Answer 2

Just place your CSS to your base path.

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

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

In this structure you may omit path: background-image: url(img1.png);

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

If you use more paths, you may split your CSS and place every part to the path you need. Referencing from unix root is a serious security issue:

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

You could create symlinks to folders you need.

Answer 3

I solved the same problem in my NodeWebkit app 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 required.

eg: ../../css/my.css