Referencing an image within the vault via CSS content url

[andanteinblue]

What I’m trying to do

I’m trying add an image to be displayed as a part of a callout using the content url, using a construction like

.callout[data-callout=panel]::after {
  content: url("VaultImages/myimage.png");
}

But this does not work. If I change url to point to a weblink, then it works fine:

.callout[data-callout=panel]::after {
  content: url("https://upload.wikimedia.org/wikipedia/commons/e/e8/A_duck_%286125133746%29_%28cropped%29.jpg");
}

Things I have tried

This is the same issue that was raised in 2021 which received no resolution: CSS snippet to display image from vault? I have also tried the recommended solutions (using the file:/// , app:///, and even the obsidian://open?vault= Obsidian URL), but none of these seem to work.

[ariehen]

Obsidian’s CSS can’t refer to / use local files. You’ll have to base64 encode the image and add it to the .css file.

This is for themes, but it works the same in user snippets: Embed fonts and images in your theme - Developer Documentation

---

e.g. for a svg:

.callout[data-callout="panel"] {
    --callout-color: 208, 185, 240;
}
.callout[data-callout="panel"]::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-20 0 76 36'%3E%3Cpath fill='%238899A6' d='M15 9l6-6s6-6 12 0 0 12 0 12l-8 8s-6 6-12 0c-1.125-1.125-1.822-2.62-1.822-2.62l3.353-3.348S14.396 18.396 16 20c0 0 3 3 6 0l8-8s3-3 0-6-6 0-6 0l-3.729 3.729s-1.854-1.521-5.646-.354L15 9z'/%3E%3Cpath fill='%238899A6' d='M20.845 27l-6 6s-6 6-12 0 0-12 0-12l8-8s6-6 12 0c1.125 1.125 1.822 2.62 1.822 2.62l-3.354 3.349s.135-1.365-1.469-2.969c0 0-3-3-6 0l-8 8s-3 3 0 6 6 0 6 0l3.729-3.729s1.854 1.521 5.646.354l-.374.375z'/%3E%3C/svg%3E");
}

[andanteinblue]

I see. Thank you for the explanation and solution!