Loading local files in css snippet

I’m currently trying to load a local image to use for my background in my workspace. The code currently looks like this:

.cm-scroller {
    background-image: url('./snippets/lotus.png');
    background-position: bottom right;
    background-repeat: no-repeat;

I’ve figured that because of the way obsidian is instantiated, the snippet isn’t actually loaded from the .obsidian\snippets folder. Therefore i have no idea how to get to the local file I’m trying to access. Also this works very fine:

background-image: url('https://pure80spop.co.uk/wp-content/uploads/2020/07/Rick_Astley-1600x1069.jpg');

Thanks for help <3


This seems to be a browser security limitation (local files cannot be loaded).

For example, the code to achieve what you are asking is:

background-image: url("file:///Users/OSX/images/background.jpg");

But the browser console (in Dev Tools) will show:

Error: app.js:1 Not allowed to load local resource: file:///Users/OSX/images/background.jpg


  1. EASIEST - upload your background image to a server, and link to it (as you did with that gorgeous Rick Roll image (NICE ONE by the way!)).

  2. MORE-COMPLEX - make your local drive a server, and access the image via an open port.

Personally, I’d go for Option 1 (for simplicity and security).

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.