Background Image in Obisidan

Basement
1

Hi guys,
I am trying to have a background image in my Obsidian, and I found this css code in this thread:

.markdown-preview-view {
  z-index: 0;
}
.markdown-preview-view::after {
  content: "";
  position: absolute;
  background-image: url(https://picsum.photos/200);
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(4px) brightness(50%) saturate(50%);
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

My problem is that I want the image to stay fixed when I scroll, so I changed position: fixed, which did solve the problem. However, now I have weird behavior when I hover pages, and when I click on a plugin page (inside community plugins).
Can someone help (I have no experience with CSS)?

Video:

Thanks :slight_smile:

2

Try change .markdown-preview-view::after to .workspace-split.mod-root .view-content::after.

In the thread you mentioned see this post: Custom background image on obsidian - #10 by mmartin

3

Hi, thanks for the reply!
I changed what you suggested to:

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

/*.markdown-preview-view::after {  This was the previous line*/  
.workspace-split.mod-root .view-content::after {
  content: "";
  position: fixed;
  background-image: url(https://nxcache.nexon.net/maplestory/landing/images/share_fb.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(3px) brightness(40%) saturate(80%);
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index:-1;
}

But now it seems like the background image disappeared.
Also, I saw the post you referred me to, but I didn’t really understand it.

4

I found a solution that works for me (thanks to @anon95294501 !!):

.view-content .markdown-preview-view::after {
  content: "";
  position: fixed;
  background-image: url(https://picsum.photos/200);
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(4px) brightness(50%) saturate(50%);
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

.popover.hover-popover::after {
  content: "";
  position: absolute;
  background-image: url(https://picsum.photos/200);
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(4px) brightness(50%) saturate(50%);
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

@mnvwvnm thank you anyway :slight_smile: !

3 Likes
5

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

6

Adding this to make it easier to find both solutions: Add a pleasant, not distracting image background to your sidebar with custom CSS

2 Likes