Custom Background Image Issue

Blazar · November 29, 2024, 2:38pm

I’m trying to add a custom background image to the entire Obsidian window. However, I can’t seem to add the background and the blur to the titlebar at the top (where its all grey)

Here is my code:

.theme-dark .workspace {
  backdrop-filter: brightness(0.9) blur(5px); 
  background-color: transparent;
}

.horizontal-main-container { 
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9_MwL8hb2wZv44SjAz_oAs4pa-HL8GDym3MxhfqgRp5ZvITTznMom39z5DYiDFUrxMiy3mTkmUv17W_UK4h74VZeoZ-VDjuGoiArwC3wWG5ImPq2G1edKVQM1l17_wrqry56dh7hGWuyrgj99HWO6o8VrdbC9aUpNJmiD-fmVKSBDVcHlCWUVg8ep/s1920/Wallpaper.png);
  background-size: cover !important;
}

.vertical-main-container {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9_MwL8hb2wZv44SjAz_oAs4pa-HL8GDym3MxhfqgRp5ZvITTznMom39z5DYiDFUrxMiy3mTkmUv17W_UK4h74VZeoZ-VDjuGoiArwC3wWG5ImPq2G1edKVQM1l17_wrqry56dh7hGWuyrgj99HWO6o8VrdbC9aUpNJmiD-fmVKSBDVcHlCWUVg8ep/s1920/Wallpaper.png);
  background-size: cover !important;
}
.workspace-split.mod-root, .titlebar-inner {
  background-color: var(--background-primary);
}

body, .titlebar-inner, .titlebar, .titlebar-button { 
  --background-primary: semi-transparent;
  --background-secondary: semi-transparent;
  --divider-width: 0px;
}

input.task-list-item-checkbox::after {
  background-color: red;
}

Blazar · December 1, 2024, 6:07am

I’m trying to add a custom background image to the entire Obsidian window. However, I can’t seem to add the background and the blur to the titlebar at the top (where its all grey)

Here is my code:

.theme-dark .workspace {
  backdrop-filter: brightness(0.9) blur(5px); 
  background-color: transparent;
}

.horizontal-main-container { 
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9_MwL8hb2wZv44SjAz_oAs4pa-HL8GDym3MxhfqgRp5ZvITTznMom39z5DYiDFUrxMiy3mTkmUv17W_UK4h74VZeoZ-VDjuGoiArwC3wWG5ImPq2G1edKVQM1l17_wrqry56dh7hGWuyrgj99HWO6o8VrdbC9aUpNJmiD-fmVKSBDVcHlCWUVg8ep/s1920/Wallpaper.png);
  background-size: cover !important;
}

.vertical-main-container {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9_MwL8hb2wZv44SjAz_oAs4pa-HL8GDym3MxhfqgRp5ZvITTznMom39z5DYiDFUrxMiy3mTkmUv17W_UK4h74VZeoZ-VDjuGoiArwC3wWG5ImPq2G1edKVQM1l17_wrqry56dh7hGWuyrgj99HWO6o8VrdbC9aUpNJmiD-fmVKSBDVcHlCWUVg8ep/s1920/Wallpaper.png);
  background-size: cover !important;
}
.workspace-split.mod-root, .titlebar-inner {
  background-color: var(--background-primary);
}

body, .titlebar-inner, .titlebar, .titlebar-button { 
  --background-primary: semi-transparent;
  --background-secondary: semi-transparent;
  --divider-width: 0px;
}

input.task-list-item-checkbox::after {
  background-color: red;
}