> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.ecomx.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Blum Image Banner

**Theme:** Blum · **Section type:** All-template section

The Image banner section shows one large image with a heading, text, and up to 2 buttons on top. Use it as a hero at the top of a page or to announce a collection, a sale, or a story.

> **Note:** You can add this section to any template, except the header and footer. The section has one Content block for the text and buttons.
![Image banner on desktop with heading, text, and a button](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/imagebanner-1_1w7w1dv.png)

**What you can do**
- Add the section and your image
- Add the heading, text, and buttons
- Add a parallax effect
- Link the whole banner to a page
- See what customers see
- Change the height, overlay, and badge
- Fix common problems

---

## Add the section and your image
1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click **Add section** > **Image banner**.
3. Under **Image**, select a **Background image**. A 2880 x 1200 px .jpg works best.
4. Optional: select a **Mobile background image (optional)**. A 750 x 1400 px .jpg works best. If you don't add one, phones show the main image.
5. Under **Layout**, choose the **Section height on large screen** and **Section height on small screen**.
6. Click **Save**.

> **Tip:** Keep the subject of your photo away from the side where the text sits, and check the mobile preview. A wide image is cropped a lot on a tall phone screen, which is why a separate mobile image often looks better.

## Add the heading, text, and buttons
1. Under **Image banner**, click the **Content** block.
2. Choose a **Content position**: **Center**, **Left center**, or **Left bottom**.
3. Under **Text**, enter a **Subheading**, **Heading**, and **Description**.
4. Under **Buttons**, enter a **Primary button label** and **Primary button link**. Add a secondary button the same way, or clear a label to hide that button.
5. Click **Save**.

## Add a parallax effect
1. Click the **Image banner** section.
2. Under **Image**, turn on **Enable parallax effect**.
3. Choose a **Parallax direction**: **Vertical**, **Horizontal**, or **Zoom**.
4. Click **Save**.

> **Tip:** Parallax looks best with a tall banner (70% or Fill screen height) and an image with space around the subject, because the image moves inside the banner.

## Link the whole banner to a page
1. Click the **Image banner** section.
2. Under **Link**, enter a **Link**.
3. Click **Save**.

The whole banner becomes clickable only when no button has both a label and a link.

## What customers see
- **Banner:** the image fills the section, with the text and buttons on top. A mask overlay darkens the image so the text stays readable.
- **Parallax:** when parallax is on, the image moves up and down, sideways, or zooms as customers scroll.
- **Phones:** screens up to 768 px wide show the mobile background image when you add one, and use the small-screen height.
- **Banner link:** clicking the banner opens the link in a new browser tab.
![Image banner on a phone, showing the separate mobile background image](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/imagebanner-2_k86yj4.png)

## Settings reference
### General
| Setting | What it does |
| ---- | ---- |
| Color scheme | Sets the colors of the section. Edit schemes in Theme settings > Colors. |
| Enable large heading | Shows the heading in the larger headline size. Useful when the banner is the first section on the page. |
| Enable full-width banner | Stretches the banner to the full screen width. Turn it off to keep it inside the page margins. |
| Mask overlay opacity | Sets how dark the mask over the image is, from 0% to 90%. |
| Mask overlay | Sets the color of the mask. The color picker sits right below Mask overlay opacity. |
| Content overlay | Sets the color of the text on the banner. |

### Layout
| Setting | What it does |
| ---- | ---- |
| Section height on large screen | Sets the height on desktop: Adapt to content, 30% screen height, 50% screen height, 70% screen height, Fill screen height, or Adapt to image (the height follows the image ratio). The section grows if the content needs more space. |
| Section height on small screen | Sets the height on phones: Adapt to content, 50% screen height, 70% screen height, Fill screen height, or Adapt to image. |
| Remove padding top | Removes the space above the section. |
| Remove padding bottom | Removes the space below the section. |

### Image
| Setting | What it does |
| ---- | ---- |
| Enable parallax effect | Moves the image as customers scroll. |
| Parallax direction | Vertical, Horizontal, or Zoom. Appears when Enable parallax effect is on. |
| Background image | The banner image. 2880 x 1200 px .jpg recommended. |
| Mobile background image (optional) | A different image for phones. 750 x 1400 px .jpg recommended. |

### Prominent badge
| Setting | What it does |
| ---- | ---- |
| Text | The badge text. Leave it empty to hide the badge. |
| Accent scheme | Colors the badge with the Main or Extra accent from Theme settings > Colors > Accent. Appears after you enter text. |
| Position | Places the badge on the Left or Right. Appears after you enter text. |
| Shape | Star, Diamond, or Asterisk. Appears after you enter text. |

### Link
| Setting | What it does |
| ---- | ---- |
| Link | Makes the whole banner clickable. Works only when no button has both a label and a link. |

### Content block settings
| Setting | What it does |
| ---- | ---- |
| Content position | Places the text and buttons at Center, Left center, or Left bottom. |
| Subheading, Heading, Description | The text on the banner. |
| Primary button label, Secondary button label | The button text. Leave a label empty to hide that button. |
| Primary button link, Secondary button link | Where the button goes. Appears after you enter the button label. |

## Troubleshooting
**The image is cropped on phones.**
A wide image is cut to fit a tall phone screen. Add a **Mobile background image (optional)**, or set **Section height on small screen** to **Adapt to image**.

**The banner link doesn't work.**
The banner link is turned off when a button has both a label and a link. Remove the button link, or let customers use the button.

**I don't see the Parallax direction setting.**
**Parallax direction** appears only after you turn on **Enable parallax effect**.

**The text is hard to read.**
Increase **Mask overlay opacity**, or change the **Content overlay** color.

## Related articles
- [Blum Slideshow](https://doc.ecomx.co/en/article/blum-slideshow-8jnt92/)
- [Blum Video Banner](https://doc.ecomx.co/en/article/blum-video-banner-umopmy/)
- [Blum Countdown banner section](https://doc.ecomx.co/en/article/blum-countdown-banner-section-yf2nwm/)
- [Blum Hero Image With Text](https://doc.ecomx.co/en/article/blum-hero-image-with-text-10ms29c/)