The Custom Graph Background
The custom graph view background snippet, controllable via Style Settings sliders for position, opacity, brightness, and blur.
Obsidian's graph view shows your vault as a constellation of nodes and links. By default it sits on a plain dark background. The Celestial Vault replaces that plain background with a custom atmospheric image — and exposes controls to tune it.
What You'll See
Open the local graph or the global graph (left sidebar's Graph view tab, or Cmd/Ctrl + G). Behind your nodes, you'll see a soft, dim, atmospheric image — by default a deep-space scene that fades behind your nodes without overpowering them.
It's controlled by the celestial-graph-background.css snippet — see Celestial CSS Snippets for the full snippet list.
Why It Matters
The graph view in most vaults looks clinical. Black background, hard-edged nodes. Functional but lifeless.
A custom backdrop transforms it into something contemplative — a place you'd actually open to think, not just to verify links exist. Because you'll spend real time in your graph (especially if you live in the self-organizing layer), making it a beautiful place pays off.
Tuning It Via Style Settings
The Celestial Vault ships with the Style Settings plugin pre-installed. Open:
Settings → Style Settings → Graph Background
You'll find sliders for:
| Control | What it does |
|---|---|
| Position | Where the image sits in the graph view (top, center, bottom; left, center, right) |
| Size | How large the image renders relative to the graph view's dimensions |
| Opacity | How visible the image is — 0% = invisible, 100% = full strength |
| Brightness | Lightens / darkens the image |
| Blur | Adds a soft blur (useful if your image is too detailed and competes with nodes) |
All updates are live. Drag a slider, watch the graph respond.
The default values are tuned for the bundled image.
If you swap the image (see below), expect to re-tune brightness and opacity. A bright image at 100% opacity will swallow your graph nodes; a very dim image needs lower opacity to fade attractively.
Replacing The Image
Want a different graph backdrop? Two approaches:
Approach 1 — Edit The Snippet (Quick)
- Open
.obsidian/snippets/celestial-graph-background.cssin any text editor - Find the line that defines the image URL
- Replace it with the path to your image (you can drop a new image into the snippets folder or anywhere in the vault)
- Save
Reload Obsidian. New backdrop.
Approach 2 — Override With A Custom Snippet (Update-Safe)
If you don't want your edit to be overwritten when you update Celestial:
- Copy
celestial-graph-background.cssand rename tokarl-personal-graph-bg.css(or whatever) - In your custom snippet, override the image URL
- In Appearance settings, enable your custom snippet, disable the original
Your custom snippet survives every update.
What Makes A Good Graph Backdrop
A few principles:
- Low contrast or low detail — busy images compete with the graph's nodes and edges
- Atmospheric — landscapes, nebulae, abstract gradients all work; specific objects with sharp lines don't
- Dark or muted color palette — bright images clash with the Celestial dark theme
- Aspect ratio doesn't matter — Style Settings can position and scale to fit
Some sources:
- Unsplash — search for "nebula", "starfield", "ambient", "atmospheric"
- Pixabay — same kinds of searches
- NASA's image archive — public domain, lots of stunning space imagery
Disabling The Backdrop
If you'd rather have a plain graph view (e.g., when reading the graph more analytically and the backdrop becomes noise):
Settings → Appearance → CSS snippets → celestial-graph-background.css → toggle off.
The graph view reverts to Obsidian's default. Toggle it back on whenever.
A Note On Performance
The graph backdrop is a single static image rendered behind the canvas. It has zero ongoing performance cost — once loaded, it just sits there.
The only time you might notice is the initial graph view load, which can take a few extra milliseconds while the backdrop image loads. Not enough to be perceptible.
Up Next
- Celestial CSS Snippets — the full snippet list
- The Celestial Theme — the broader visual context
- The Self-Organizing Vault — why you'll spend time in the graph view at all