Custom background on my obsidian pages

Custom CSS & Theme Design
1

Hello Everyone!

I’ve been using Obsidian for about half a year now, but I’m still getting used to CSS. I’m currently trying to implement a custom background for my Obsidian pages

Things I have tried

I’ve tried the following code from another thread:

.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;
}

However, this doesn’t seem to have worked! I was wondering if it was theme-dependent. I’m currently using Prism, which I really like. I’m going for a cyber-core blue periwinkle theme. Here’s an idea of some of the images I’d use

2

Here’s the code, as to make it easier to copy (my bad:))

.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;
}```