Transform your notes with stunning banner images that create visual impact and enhance document presentation.
## What is the Banner CSSClass?
The Banner CSSClass converts the first image in your note into a full-width banner that spans across the top of your document. The image automatically resizes to fit the page width and applies a subtle gradient fade at the bottom for seamless integration with your content.
## How to Use Banner Images
### Step 1: Add CSSClass to Frontmatter
Add `banner` to your note's CSS classes in the frontmatter:
```yaml
---
cssclasses: banner
---
```
### Step 2: Place Image on First Line
>[!warning] The banner image must be the very first line of content after your frontmatter.
>This is what transforms into the image into the banner!
```markdown
---
cssclasses: banner
---
# Your Document Title
Your content begins here...
```
### Alternative Syntax Options
You can use any of these image formats for your banner:
```markdown
![[Internal Image.png]]
```
## Visual Features
### Automatic Sizing
- **Height:** 200px by default (customizable)
- **Width:** Full page width, extends beyond normal text margins
- **Fit:** Images automatically crop to maintain aspect ratio
- **Position:** Centered horizontally and vertically within the banner area
### Gradient Fade Effect
The banner includes an elegant gradient mask that transitions from:
- **Solid image** at the top
- **Gradual fade** starting at 50% height
- **Nearly transparent** at 95% height
- **Completely transparent** at the bottom edge
This creates a smooth visual transition between your banner and document content.
## Customisation Options
### Adjusting Banner Height
Modify the banner height by adding custom CSS:
```css
body {
--cssc-banner-height: 300px; /* Change from default 200px */
}
```
### Changing Residual Spacing
Control the space between banner and content:
```css
body {
--cssc-banner-residual: 20px; /* Add gap below banner */
}
```
### Custom Gradient Effects
Modify the fade pattern:
```css
body {
--cssc-banner-gradient-mask: linear-gradient(to bottom,
black 0%,
black 60%, /* Solid area extends further down */
transparent 90% /* Faster fade to transparent */
);
}
```
## Practical Examples
### Academic Paper
```yaml
---
title: "Climate Change Research Findings"
cssclasses: banner
---
# Climate Change Research Findings
## Executive Summary
Recent data indicates...
```
### Travel Journal
```yaml
---
cssclasses: banner
tags: [travel, europe]
---
![[paris-eiffel-tower.jpg]]
# Paris Adventure - Day 3
Today we visited the iconic Eiffel Tower...
```
### Project Documentation
```yaml
---
cssclasses: banner
project: website-redesign
---
# Website Redesign Project
## Project Overview
This document outlines our approach...
```
## Summary
The Banner CSSClass transforms ordinary notes into visually striking documents that capture attention and create professional presentations worthy of your best ideas.