Custom Banners

The Celestial Vault has a frontmatter-driven banner system that lets you put any image, GIF, or video at the top of any note — and tune its position, fade, height, and corners to taste.

(This is similar to but distinct from the standalone Time Garden banner system — see Changing the Banners for the basic concept. Celestial's implementation adds extra controls and integrates more deeply with the theme.)

The Frontmatter Keys

Add these to any note's frontmatter:

---
banner: "*Some Image.gif*"
banner-y: 30
banner-x: 50
banner-height: 400
banner-fade: -50
banner-radius: 25
banner-display: cover
banner-repeat: false
content-start: 200
---

Each one:

A Common Setup

For a typical journal-style note, this combination works well:

banner: "*Mountain Sunrise.jpg*"
banner-y: 40
banner-height: 360
banner-fade: -50
banner-radius: 20
content-start: 280

The image sits with its sky-portion centered, fades into the page background by ~50%, has gentle 20px rounded corners, and the note content starts ~280px from the top — leaving room for the banner without crowding the title.

Where Banner Images Live

Banner images can live anywhere in the vault, but the conventions in Celestial are:

• Daily / monthly / yearly templated banners: Time Garden/06 Templates/Images/[Period] Notes/
• Per-note custom banners: drop the image anywhere — Attachments/, References/, the vault root, etc. — and reference it via wikilink

The banner system resolves wikilink paths automatically.

Setting A Banner On An Existing Note

1. Open the note
2. Open its Properties panel (or edit the frontmatter at the top in source mode)
3. Add banner: "*Your Image Name*"
4. Optionally tune banner-y, banner-fade, etc.

The banner appears immediately. No reload needed.

Removing A Banner

Delete the banner: line from the note's frontmatter. (Leaving the other banner-* keys behind is fine — they only do anything when there's a banner to render.)

The note's padding above the title returns to normal automatically (the banner system tracks its own padding via a data-kb-padded attribute, so it cleans up cleanly).

Animated Banners (GIFs / Videos)

Animated GIFs work as banners just by referencing them:

banner: "*Some Loop.gif*"

Video files (.mp4, .webm) work too:

banner: "*Atmosphere.webm*"

The vault auto-plays, mutes, and loops them. No separate config required.

How The Banner System Avoids Common Bugs

Banners on Obsidian are tricky — most plugins that try to do this leak padding into other notes, fail to clean up after themselves, or clash with frontmatter rendering modes. Celestial's banner system handles all of these:

• Deduplication via requestAnimationFrame — even if multiple events try to apply a banner at once, only one render happens
• Self-tracked padding — the banner uses a data-kb-padded attribute to know exactly how much space it added, so removing the banner removes only its own padding (never another plugin's)
• Path resolution — both wikilink-style ("*Image.png*") and direct-path-style ("path/to/image.png") banners work

Default Banners On Temporal Notes

If you don't set a banner: value, temporal notes (daily, monthly, Dreamline, yearly) get a banner automatically based on day-of-week / month / year — same logic as standalone Time Garden (Changing the Banners).

You can override the auto-banner on any specific note by adding your own banner: to its frontmatter. Per-note overrides win.

Up Next

• Note Lock — the password gate for sensitive notes
• The Celestial Theme — the overall aesthetic the banner sits inside
• Changing the Banners — the standalone Time Garden equivalent (similar but simpler)