How to add a custom image as a background

I looked up a bunch of different Obsidian forums on how to change the background when editing text to an image of my choosing. I copied the code put it into the snippets and they work, but only for the graph view. There was also another post about editing the sidebar that also didn’t help.

I’m hoping I can get some simple code to copy and paste into a snippet that allows me to have an image as a background here. Extra points if you can give help using my own files as a directory.

I came up with this code snippet. This will create a background image for the whole pane:

.theme-light .workspace {
    backdrop-filter: brightness(1) blur(5px); /* filter for light mode */
    background-color: transparent;
.theme-dark .workspace {
    backdrop-filter: brightness(0.35) blur(5px); /* filter for dark mode */
    background-color: transparent;
.horizontal-main-container { /* below is the background image. Change it to whatever you want */
    background: url(;
    background-size: cover;
.workspace-split.mod-root {
    background-color: var(--background-primary);

body { 
/* the background-primary makes the main note pane completely transparent. 
You can change it to be semi-transparent if you want. 
I changed background-secondary and divider-width because it
looks a bit cleaner in my opinion. You can delete those modifications if you want.*/
    --background-primary: transparent;
    --background-secondary: transparent;
    --divider-width: 0px;

I think using url('/file/path.png') for the background image will work. It didn’t work when I tried it, but that might be because my vault is on the cloud.

You may also have to mess around with the colors a bit to get it to look nice, but this does gives it a background image.


Wow, I didn’t expect an answer so fast and it actually worked! Thank you so much! <3

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