# Image banner

> A large photo or a looping video with a heading, text and up to two buttons laid over it. Use it for a campaign, a new collection or a striking first impression.

Tally theme documentation · HTML version: https://themelab.page/tally/docs/sections/image-banner/

## At a glance

- **In the editor:** Image banner
- **Where it goes:** Any page template, with Add section
- **In the presets:** Tally: About page; Poster: Home page, About page; Petal: Home page, About page
- **Settings:** 33
- **App blocks:** Yes

## When to use it

An image banner says one thing loudly: a new season, a sale, a collection. As the first section of the page, it can carry the [transparent header](https://themelab.page/tally/docs/sections/header.md#transparent). Further down, it makes a strong break between product rows.

## Set it up

1. Upload an **Image** – at least 2400 px wide for full width. Add a **Mobile image** in portrait for phones, so the subject is not cropped away.
2. Choose a **Height**: *Small*, *Medium*, *Large* or *Full screen*. Turn on **Full width** to run the image edge to edge.
3. Write the **Label** (a small line above the heading), the **Heading** and the **Text**.
4. Set up to two buttons, each with its own style: *Primary*, *Secondary* or *Highlight*.

## Keep the text readable

Text on photos needs contrast. The **Overlay** darkens or tints the image under the text:

| Overlay style | Effect |
| --- | --- |
| **Solid** | An even tint over the whole image. |
| **Gradient from bottom** | Dark at the bottom, clear at the top – ideal with text at the bottom. |
| **Gradient from left** | Dark on the left, clear on the right – ideal with text on the left. |
| **Vignette** | Darker edges, a bright centre. |
| **Duotone** | Turns the photo into two tones of the overlay color, for a graphic, poster-like look. |

Set the **Overlay color** and **Overlay opacity** (0–90%). Instead of an overlay, you can put the text on a **Content background**: a *Card* in its own color scheme, or *Frosted glass* that blurs the photo behind the text.

## Content position

**Content position on desktop** offers nine positions, from top left to bottom right; **Content position on mobile** offers top, middle or bottom. **Text alignment** is left or centered. Without a content background, the text uses **Text color without background** – white by default.

## Video

Add a **Video** to play it muted on a loop over the image. The image stays as the poster while the video loads, and on slow connections. Shoppers get a small pause button, and the video does not play for those who reduce motion.

> **Tip:** Choose the photo for the crop
>
> Banners are cropped differently on every screen. Keep the subject in the middle third of the photo, and check the banner in the editor's mobile view before you publish.

## All settings

Every setting in the order of the theme editor, with its options and its default value.

**Section: Image banner** (33 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Image** | Image | – |
| **Mobile image** – Optional. Shown on small screens. | Image | – |
| **Video** – Optional. Plays muted on a loop over the image, which stays as the poster and on slow connections. | Video file | – |
| **Height** | Small · Medium · Large · Full screen | Medium |
| **Full width** | Checkbox | Off |

*Overlay*

| Setting | Options | Default |
| --- | --- | --- |
| **Overlay style** | Solid · Gradient from bottom · Gradient from left · Vignette · Duotone | Gradient from bottom |
| **Overlay color** | Color | #161616 |
| **Overlay opacity** | 0–90% (step 5) | 35% |

*Content*

| Setting | Options | Default |
| --- | --- | --- |
| **Content position on desktop** | Top left · Top center · Top right · Middle left · Middle center · Middle right · Bottom left · Bottom center · Bottom right | Bottom left |
| **Content position on mobile** | Top · Middle · Bottom | Bottom |
| **Text alignment** | Left · Center | Left |
| **Content background** | None · Card · Frosted glass | None |
| **Content background color scheme** | Color scheme | Scheme 2 |
| **Text color without background** | Color | #FFFFFF |
| **Label** | Text | – |
| **Heading** | Rich text (one line) | Sample text |
| **Heading size** | Extra large · Large · Medium | Large |
| **Text** | Rich text | Sample text |
| **First button label** | Text | Sample text |
| **First button link** | Link | – |
| **First button style** | Primary · Secondary · Highlight | Highlight |
| **Second button label** | Text | – |
| **Second button link** | Link | – |
| **Second button style** | Primary · Secondary · Highlight | Secondary |
| **Color scheme** | Color scheme | Scheme 2 |

*Section spacing*

| Setting | Options | Default |
| --- | --- | --- |
| **Top padding** | 0–160px (step 4) | 0px |
| **Bottom padding** | 0–160px (step 4) | 0px |
| **Top padding on mobile** | 0–120px (step 4) | 0px |
| **Bottom padding on mobile** | 0–120px (step 4) | 0px |

*Advanced*

| Setting | Options | Default |
| --- | --- | --- |
| **Hide on mobile** | Checkbox | Off |
| **Hide on desktop** – Mobile means below the width where the header switches to the mobile menu (Header > Switch to the mobile menu below). | Checkbox | Off |
| **Animate on scroll** | Checkbox | On |
| **Anchor ID** – Link to this section with #anchor-id. | Text | – |

## Related

- [Slideshow](https://themelab.page/tally/docs/sections/slideshow.md): Several full-width banners that change on their own or with arrows, swipes and keys, with a slide or fade transition.
- [Hero](https://themelab.page/tally/docs/sections/hero.md): The catalog opener – a big headline and short text beside a framed image, with quick links to what shoppers look for most.
- [Video](https://themelab.page/tally/docs/sections/video.md): A video from your files or from YouTube or Vimeo, with a cover image and an optional heading and text.