> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/avante-themes/sections/banners/image-banner.md).

# Image banner

A full-width hero with your heading, text, and buttons over one or two background images. Separate mobile image, overlay controls, and scroll animation.

Image banner is the section most stores put at the very top of the homepage. It carries the one message you want every visitor to see first — a season, a launch, a promise — on a large image, with a button that sends people straight into the collection you are pushing.

### How to add

{% stepper %}
{% step %}

#### Add the section

In the theme editor, open the template you want and click **Add section → Image banner**.
{% endstep %}

{% step %}

#### Upload the background

Set **First background image**. Leave **Second background image** empty for a single full-bleed image, or fill it to show two images side by side.
{% endstep %}

{% step %}

#### Set the height

**Height mode → Percents** is the default and keeps the banner at 70% of the screen height. Switch to **Pixels** for a fixed height between 500 and 1600 px, or to **Adapt to first image** to let the image's own proportions decide.
{% endstep %}

{% step %}

#### Add your content

Use **Add block** to build the message — **Subheading**, **Heading**, **Text**, **Button** and the rest of the shared content blocks. Place it with **Center text**, **Vertical content position** and **Horizontal content position**.
{% endstep %}

{% step %}

#### Keep the text readable

Raise **Image overlay opacity** (70% by default) or pick a different **Image overlay** color until the text stands out against the photo.
{% endstep %}

{% step %}

#### Take care of mobile

Open **Mobile** and upload a **Mobile image** — a portrait (4:5) or square (1:1) crop. Set the mobile **Height**, and turn on **Show content under image** if the text reads better below the picture than on top of it.
{% endstep %}
{% endstepper %}

### Good to know

**The second image is desktop-only.** On screens up to 768 px wide, **Mobile image** replaces both background images. If you have not uploaded a mobile file, **Show only first image** drops the second one on mobile so the remaining image is not squeezed into half the width.

**Link makes the whole banner clickable.** Fill **Link** in the section settings and the entire area becomes one tap target. Buttons inside the banner keep their own links, so a visitor who hits a button still goes where that button points.

**Show content only on hover** hides the text until the cursor is over the banner. It is a desktop effect — touch devices have no hover, so the content stays visible there.

**Height mode and content height work together.** In **Percents** and **Pixels** the banner holds the height you set and the content is positioned inside it. In **Adapt to first image** the height comes from the image, so a tall stack of blocks can outgrow the picture.

{% hint style="info" %}
To run the banner under a see-through navigation bar, set **Section width** to **Overlap by navigation** and switch the header to transparent for that template. **Full-width** and **Wide** place the banner below the header instead. See [Transparent header](/docs/avante-themes/features-and-advanced-setup/transparent-header.md).
{% endhint %}

**File weight matters more than the exact ratio.** The theme serves a responsive set of image sizes, so an oversized file mostly costs you load time. See [Image & video size recommendations](/docs/avante-themes/faq/performance/image-and-video-size-recommendations.md).

**Content blocks.** Image banner takes the shared content blocks: Subheading, Heading, Inline image reveal, Text, Collapsible tab, Button, Context image, Image, Empty space, Line, Video button, Promo code and Countdown timer. See [Common blocks](/docs/avante-themes/sections/overview.md#common-blocks).

**Background animation.** **Background animation → Animation** is **Default**, which follows [Theme settings → Animation](/docs/avante-themes/theme-settings/animation.md). **Customize** gives this banner its own **On scroll** effect — **Parallax**, **Sticky**, **Zoom in** or **Zoom out** — and its own mobile behaviour. See [Background animation](/docs/avante-themes/features-and-advanced-setup/background-animation.md).

### Customization ideas

* Use the two background images as a before/after or a his/hers split, with one heading centered across both.
* Add a **Countdown timer** block for a sale that ends on a date, and a **Promo code** block so the code can be copied in one tap.
* Set **Height mode → Pixels** on a short banner (500–600 px) to use the section as a slim campaign strip between content sections rather than a hero.
* Turn on **Show content only on hover** on a quiet editorial image so the photo carries the page and the copy appears on interaction.
* Stack two Image banners with **Overlap by navigation** off and **Narrow content width** on for a magazine-style opening spread.

### Best practices

* One message per banner. A hero that says three things says none of them.
* Check the mobile crop in the editor's mobile preview — the focal point of a 16:9 desktop photo usually falls outside a 4:5 mobile frame.
* Keep the overlay strong enough that the heading passes a contrast check on the busiest part of the image, not the calmest.
* If the banner is the first thing on the page, leave **Background animation** on **Default** so it matches the rest of the store.

***

### Related

* [Video banner](/docs/avante-themes/sections/banners/video-banner.md)
* [Slideshow with media](/docs/avante-themes/sections/banners/slideshow-with-media.md)
* [Background animation](/docs/avante-themes/features-and-advanced-setup/background-animation.md)
* [Transparent header](/docs/avante-themes/features-and-advanced-setup/transparent-header.md)
* [Image & video size recommendations](/docs/avante-themes/faq/performance/image-and-video-size-recommendations.md)
* [Common section settings](/docs/avante-themes/sections/overview.md#common-section-settings)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://staylime.com/docs/avante-themes/sections/banners/image-banner.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.