LOCAL background image in CSS not working

Custom CSS & Theme Design
1

I’m playing around with this character sheet: A DnD Character sheet I made using Canvas! (complete with working deathsaves counter)
which uses some images as backgrounds in canvas. But I’d like to use LOCAL images instead of referring to imgur.

.callout[data-callout-metadata~=profile-img]::before {
  content: "";
  width:100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  background-image: url("https://i.imgur.com/l9cPUkm.png");
  background-size: 100% 100%;
}

works, but

using background-image: url(../../Assets/profile-img-overlay.png); does not. I’ve tried all combinations I could think of of relative, absolute paths, with single and double quotes.

are local background images in CSS for Obsidian not possible?

Thanks

2

Embedding local files using CSS is blocked for security reasons.

3

Thanks! Out of curiosity, how is it more secure to get images from the internet than from a local file?

4

There used to be a way that made it possible for CSS to embed local files
Unfortunately that also made if possible for an attacker to read the content of other files, if some code would be embedded in a website, that a user would load via an iframe.

CVE-2023-2110 if you are curious about the details

1 Like
5

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