8

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.

Francesco Belladonna
  • 11,361
  • 12
  • 77
  • 147
  • @GajusKuizinas definitely, although there might be a _timing_ issue, I mean, CSS3 are out, I wonder if there is any solution of some kind (maybe css variables) – Francesco Belladonna Feb 08 '16 at 16:28

3 Answers3

0

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.

Jan Turoň
  • 31,451
  • 23
  • 125
  • 169
  • Moving css in a root folder is not an option because my stylesheets are a lot and quite spread. However, symlinks it's a valid option, but I would like to run my application without installation (I can still write a symlink into tmp, this may be a valid idea!), anyway I wrote a big update explaining the problem, sorry for being so "generic" previously. – Francesco Belladonna Jun 30 '13 at 19:53
  • @Fire-Dragon-DoL If by *lot* you mean less than 100, I'd use brute force here: if you run it locally, the number of CSS files requests doesn't trouble you. The advantage is maintainability: if add/rename some image, all you need is to change the CSS in that folder. – Jan Turoň Jun 30 '13 at 20:43
  • I'm not sure, if you have 10 urls inside a css and you move it to a different folder, you have to change 10 ../ paths, for maintainability this is a nightmare, at least for me... I may think about merging everything to a single css file while using sass or something similar, this can be a good option. – Francesco Belladonna Jun 30 '13 at 21:09
  • 1
    If you don't use paths, you may just move all the images WITH the css file to another folder and the only thing you need to change is the new css path in the index.html. If it's not enough, you should look around for some html/css preprocessor that suits your requirements. – Jan Turoň Jun 30 '13 at 21:34
-1

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

SimpleSimon
  • 57
  • 1
  • 7
  • Sorry but I don't like this solution, if for example I move an entire directory with 10 css files I have to rewrite urls for all of them. That's a maintenance nightmare. – Francesco Belladonna Jul 03 '13 at 13:29
  • You shouldn't have 10 separate CSS files. (?!) – Alisso Mar 30 '14 at 19:44
  • 2
    @Alisso why not, it's perfectly legit. It's also better practice than having one file and all the css inside of it. – hilnius Jul 20 '15 at 19:37
  • @hilnius with 10 visits to the server to fetch them all?! (excluding CDN-links for libraries...). No thank you, one file, thus one download, to rule them all, unless I've missed something new :) – Alisso Jul 21 '15 at 09:30
  • 2
    @Alisso which is why we now concatenate (/build) CSS files and add a single in the HTML. It's a lot cleaner for development to have many small and focused CSS files. A single file can easily get into the 20k+ lines which is a maintenance nightmare. – hilnius Jul 21 '15 at 10:08
  • @hilnius - I thought you were suggesting that the person serves multiple files onto the website, yes, we agree on that point. – Alisso Jul 21 '15 at 11:59
-3

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.

vikki
  • 2,766
  • 1
  • 20
  • 26
  • 18
    This is an absolutely terrible answer - JavaScript is the last thing that's required. It's also a nightmare to maintain – Bojangles Jun 30 '13 at 19:11
  • 2
    @Bojangles I wouldn't use this myself but from the question it sounds like OP has his reasons for not using relative paths in css(which is the norm). I've given a solution that answers the question that has been asked with the information given. – vikki Jun 30 '13 at 19:29
  • I've realized window.location.href was wrong and only works if href is the base url.. corrected! – vikki Jun 30 '13 at 19:42
  • 1
    @Bojangles: "Unfortunately", this is a valid answer I think in my case, I've written a huge update where I explain why. I still wish for a greater solution anyway. – Francesco Belladonna Jun 30 '13 at 19:51
  • 2
    @Fire-Dragon-DoL I've never used node.js, but won't `process.cwd()` give you the current base directory regardless of whether this is the temp directory or not. Whether or not you package the app as a single file, you'll just have to know where the static files are (relative to your base dir). The relative path option is still viable. You can write a script that finds all your css files and generates relative paths for them depending on their location with respect to a base dir. You can run this script any time you make changes to your dir structure to correct any broken links. – vikki Jul 01 '13 at 03:54
  • Yes I agree with the approach, actually is the only chance I have to make it works. While I'll use this for the moment, I'll still search for a good cross platform webserver which will solve entirely the issue. – Francesco Belladonna Jul 01 '13 at 13:13
  • @Fire-Dragon-DoL let us know what you find. – vikki Jul 01 '13 at 13:54