Loading local files in css snippet

[Cat_Curator]

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

[ZenMoto]

THE ISSUE

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

SOLUTIONS:

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).