> For the complete documentation index, see [llms.txt](https://webvista-studio.gitbook.io/krank/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://webvista-studio.gitbook.io/krank/sections/media-and-layout/image-banner.md).

# Image Banner

The **Image Banner** section allows you to display a full-width or fixed-width banner image, perfect for showcasing promotions, key products, or brand messaging. It includes flexible layout and animation options to help you tailor the presentation to your needs.

***

### 🔧 Basic Settings

* **Enable Full Width**: Makes the banner stretch across the entire screen width.
* **Image Height**: Choose from:
  * Adaptive (based on content)
  * Small / Medium / Large (fixed height)
* **Overlay Opacity**: Adjust the transparency of an overlay layer on the image to enhance text visibility.

***

### 🎨 Content Settings

* **Color Scheme**: Select or customize a color scheme that defines text, button, and icon colors. Recommended to align with your brand identity.
* **Content Width**: Options include:
  * Narrow
  * Normal
  * Wide
  * Full Width
* **Content Position & Alignment**: Set the horizontal and vertical alignment (e.g., top-left, center-center, bottom-right).
* **Enable Content Container**: Wraps your content (text, buttons, etc.) inside a container with adjustable opacity for improved readability.

***

### 🎞️ Animation Settings

* **Image Behavior**: Choose from various scroll-based animations to enhance user engagement:
  * **Pan**: Slight motion of the image with scroll.
  * **Fixed Background**: Image remains fixed while content scrolls.
  * **Zoom on Scroll**: Image gradually zooms in as user scrolls.
  * **Parallax Scroll**: Slower scroll effect for the background image, creating depth.

***

### 🧱 Section Blocks

You can enrich your banner with multiple content blocks to create a compelling visual + textual combo.

**Supported Content Blocks**:

* 🏷️ Badge Group
* 🔘 Button
* 🔗 Button Group (includes link buttons and video pop-up buttons)
* ⏳ Countdown
* 📝 Description
* 🎁 Discount Code
* ❤️ Follow Us
* 🏆 Heading
* 📊 Key Metrics
* 🌟 Icon
* 🖼️ Icon with Text
* 🔑 Keywords
* 🔗 Link Group
* 📱 Social Media List
* 🧾 Subheading
* 🎥 Video Button
* ↕️ Spacer

The **Subheading** block includes optional styling for a custom color and Accent Line, which is useful for short labels above the main heading.

***

### ✅ Usage Tips

* Use **high-resolution images** (recommended width ≥1800px) for best display on large screens.
* Apply a **semi-transparent overlay** to improve text contrast and readability.
* Keep content **concise and action-oriented**; a title and a button work great for CTAs.
* Avoid using too many animation types at once to maintain **smooth performance**.
* Ideal for **hero sections, seasonal campaigns, brand messages, or sale banners**.