🚩 Obsidian Custom Banner Image

css snippet to allow for custom banner images per note in Reading View (live preview not supported)

---

Installation

copy the custom-banner-image.css file to your Obsidian snippets folder and enable the snippet in your Appearance preferences.

Usage

1. Add this class definition to your note's Frontmatter

   cssClass: custom-banner
   

2. Add this div after your note's Frontmatter (replace https://xyz.jpg with your own image path)

   <div class="banner-image" style="background-image:url('https://xyz.jpg');"></div>
   

3. Optionally add these Frontmatter classes to further adjust properies like image size, image display position, image fade percentage, image border radius, and frontmatter shift

   • banner image size (height)

     cb-size1
     cb-size2
     cb-size3 [default]
     cb-size4
     cb-size5
     

   • image position (shift image position in banner)

     cb-pos1
     cb-pos2 [default]
     cb-pos3
     cb-pos4
     cb-pos5
     

   • image fade (transparency used as image fades from top to bottom)

     cb-fade1
     cb-fade2
     cb-fade3
     cb-fade4 [default]
     cb-fade5
     

   • display solid image (no fade)

     cb-solid
     

   • add border-radius to image

     cb-bradius
     

   • push frontmatter (push frontmatter container down to give room to banner image)

     cb-fm-push1
     cb-fm-push2
     cb-fm-push3
     cb-fm-push4
     cb-fm-push5 [default]
     

   • auto expand frontmatter

     cb-fm-auto-expand
     

   • hide frontmatter

     cb-fm-hidden
     

Example

---

note: live preview not supported

---

My Obsidian GitHub Projects

• 🚩 Obsidian Custom Banner Image
• 🦶 Obsidian Rich Foot
• 🌅 Obsidian Image From Field
• 🌟 Obsidian Element Enhancer
• ⏹ Obsidian Bullet Cards