Custom background image on obsidian

Oops sorry. There’s a little catch in CSS I forgot to include code for. You have to have a z-index on the foreground so it knows how to layer them.

.markdown-preview-view {
  z-index: 0;
}

Put that before the previous snippet in your css file.

Basically what the snippet does is add the image to the ::after element and makes it the size of the window. The z-index on ::after is -1 which means put it 1 layer deeper than everything else. But since there isn’t a z-index on .markdown-preview-view by default it doesn’t know how to handle the layering.

I also noticed that you can change to position: fixed if you want to make it stay in place instead of scrolling with the content.

1 Like