Custom background image on obsidian

Custom CSS & Theme Design
5

This should handle the image placement and blurring for you. You can adjust the filter values to get the specific effect you want. MDN has more details about the filter functions: http://developer.mozilla.org/en-US/docs/Web/CSS/filter-function.

To use it (as with any custom CSS) you need to create a CSS snippet. As for updating the image you’d probably have to create a plugin that pings some weather API. That’s more complicated and beyond my purview.

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