Add a pleasant, not distracting image background to your sidebar with custom CSS

I was playing around with some CSS today.

Added an image from Unsplash.com to my sidebar. You know. For some personalisation.

It only relies on existing CSS (color) variables. That way it works for light and dark mode. Maybe for non-default themes, too. That I haven’t tested.

Here is how it looks:

Hope it works for you!

The CSS:

/* Draw background image and add a separator from the header. */
.nav-files-container {
    background-image: url("https://images.unsplash.com/photo-1520180673178-da6fef06aa90?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2400&q=99"); /* Replace me with the image you like. */
    background-size: cover;
    background-position: 50%;
    border-top: 1px solid var(--background-modifier-border);
    z-index: 1;
}

/* Draw a solid overlay on top of image. */
.nav-files-container:before {
    content: "";
    background-color: var(--background-secondary);
    opacity: .86;
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 2;
    display: block;
}

/* Target the top-level folder-title to add more negative space from header. */
.nav-folder-title[data-path="/"] {
    padding-top: 1em;
}

/* Extra separation from the background for the text. A subtle text shadow. */
.nav-folder-title-content, .nav-file-title-content {
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
}

.theme-dark .nav-folder-title-content, .theme-dark .nav-file-title-content {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Tell the child nav-folder to be on top of image and overlay */
.nav-folder {
    position: relative;
    z-index: 3;
}

/* Make the active selection background and hover frosted glass for more fun. */
.nav-file-title.is-active, .nav-folder-title.is-active, body:not(.is-grabbing) .nav-file-title:hover, body:not(.is-grabbing) .nav-folder-title:hover {
    background: rgba(var(--text-muted-rgb), 0.1);
    box-shadow: inset 1px 1px 0 0 rgba(var(--text-muted-rgb), 0.055);
    backdrop-filter: blur( 4px );
    border-radius: 3px 0 0 3px;
}

.
.
Does anyone know whether it is possible to access locally stored image via css?

8 Likes

Have you tried putting the image in the same folder as your CSS file? If they are both in the same directory you should only need to call the filename & not need the full path.

Thank you :pray: I have tried putting it the snippets folder. With a relative path to the file.

However, the absolute path that Obsidian takes seems to be different. Something in the lines of obsidian.app/… MacOS quirk, maybe.

However. Now, I’m curious if I should put the image in the themes folder. Do you think that might work?

Without taking time to try it myself, the themes folder would be my first thought.

If not, this may need to become a feature request to enable this kind of stuff :slight_smile:

1 Like

Going to try it as soon as I’m back at the computer. Thank you so much for the hint!

Update: I have yet to find a way to reach local images via either the theme folder or snippets / custom.css folder. Next step is to customise the Obsidian.css directly and try from there.

Referencing this post had ‘some’ clues:
I’m surprised that obsidian links don’t work, because I still want relative paths.

:white_check_mark: app://local/C:/Users/<user>/Vault/assets/background.jpg
:x: file:///C:/Users/<User>/Vault/assets/background.jpg
:x: obsidian://open?vault=vault&file=assets%2Fbackground.jpg

The overlay hid the navigation header (for creating a New Note, New Folder, and Sort options). I added the following bit to resolve:

/* Tell the nav-header to be on top of image and overlay */
.nav-header {
    position: relative;
    z-index: 4;
}
1 Like