🚩 Obsidian Custom Banner Image

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

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

Add this class definition to your note's Frontmatter
```
cssClass: custom-banner
```
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>
```
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
```

note: live preview not supported

jparkerweb/obsidian-custom-banner-image