Custom background image on obsidian

Custom CSS & Theme Design
1

Is there a way to add a custom background image on my workspace. I want to make it blurred as well, where can I add / modify this in the snippets

tried modifying body, .workspace and theme classes but nothing worked.

1 Like
2

I did a quick code. Not sure if this is the right way to do it, but it works. Just replace the URL with your own image that was already blurred in Photoshop.

.CodeMirror {
    background-image: url(https://picsum.photos/200);
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed; 
}
2 Likes
3

@jaydonteh, this will not work out of the box with obsidian, right? Your code needs to use one of the 2 css snippets 3rd party plugins (pelao or brandenburg)?

i plan to try to put a national weather services motion gif of the current regional weather map. my next problem will be how to update that gif background every couple hours…

Any Ideas on that??

4

It should just work adding it as a CSS snippet without the need of any 3rd party plugins.

2 Likes
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
6

If i use this code, its blurring the whole window-content, not only the background-image. Is there a way to seperate the background-image?
I cant think of a way, as its just a property of that div, right?

Edit: if i use other methods (like the ::after or ::before stuff) its not rendering the image.
Not sure whats causing it.
If i comment out the filter function it renders, once i have it in, its not rendering anymore.

7

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
8

Working now, thanks =) The background image i already had, but the filtering is really nice to apply (so you can use some nearly transparent image with some kind of blurred structure to give some texture to the background (imitating paper etc…)

9

Is there any way to do this in graph view so the nodes aren’t blurred out?

.workspace-leaf-content[data-type = "graph"] .view-content {
	z-index: 0;
	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;
}
10

I just found an unintended side effect if you use position:fixed. Hover previews use .markdown-preview-view so if the position is fixed it will fill the entire window. The fix is to limit the effect to the content view by prefacing the selectors with .view-content .

11

You need to keep the -1 z-index and add one to the view element. Try this:

.workspace-leaf-content[data-type="graph"] .view-content {
  z-index: 0;
}
.workspace-leaf-content[data-type="graph"] .view-content::after {
  z-index: -1;
  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;
}
2 Likes
12

Thank you! it works

13

Thank you for the code. My problem:
The image stops at the bottom of the screen, if I scroll down, there is only white space under the image. I’m stuck. Is there a special CSS rule? :smile:

14

Did you change it to position: fixed; as I mentioned above? That should do what your talking about.

15

Yes I did it. Setting « fixed » scrolls text without scrolling background image. I would like to scroll both, (trying to imitate a paper block-note mood),
and when hovering links, that turns on automatically in full screen mode », with a strange look (small letters and so on, without clicking anywhere). I am a beginner about css. If you have any idea ?
Should I upload some screenshots details?
Tx, regards. :grin:

16

@eric-2021: This sounds like a cool idea. In case you are able to get this working and aren’t already aware, creating or using a tileable paper texture (without noticeable seams) may improve the effect.

Looking forward to hearing how this works out and trying it myself.

Thanks.

17

It is really cool feature but how to make this work in edit mode also?
.markdown-source-view::after
do not work as expected from css snippet but when I change this value in chrome debug tools it works