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

# Image Banner

A static hero or mid-page banner: one or two images with a heading, text, and up to two buttons overlaid. Simpler (and lighter) than the slideshow — the right choice when you don't need rotation.

## Section settings

### Images

| Setting           | What it does                                                   | Default |
| ----------------- | -------------------------------------------------------------- | ------- |
| Image 1 / Image 2 | One image = full-width banner; two images = split side-by-side | —       |
| Overlay opacity   | Darkens images for text contrast (0–100%)                      | 0%      |
| Height            | Adapt to first image / Small / Medium / Large                  | Medium  |

### Transparent header & animation

| Setting                         | What it does                                                                                                                                                                          | Default |
| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| Optimize for transparent header | On the home page, sizes and spaces the banner so it sits correctly under Reign's transparent header. Enable this on your first-section hero along with the header's transparent mode. | Off     |
| Animation                       | None / **Ambient movement** / **Fixed background position** (parallax feel) / **Zoom in on scroll**                                                                                   | None    |

### Content placement

| Setting             | What it does                                        | Default       |
| ------------------- | --------------------------------------------------- | ------------- |
| Position (desktop)  | 9-point grid: top/middle/bottom × left/center/right | Middle center |
| Alignment (desktop) | Text alignment inside the block                     | Center        |
| Container           | Show a text box behind the content                  | On            |
| Color scheme        | Colors for the text container                       | Scheme 1      |

### Mobile layout

| Setting            | What it does                                                  | Default       |
| ------------------ | ------------------------------------------------------------- | ------------- |
| Position (mobile)  | Same 9-point grid — applies when text sits over the image     | Middle center |
| Stack images       | Two images stack vertically on phones                         | On            |
| Alignment (mobile) | Text alignment                                                | Center        |
| Container          | Show the text *below* the image on mobile instead of overlaid | On            |

## Blocks

* **Heading** — text + size (Small → Extra extra large)
* **Text** — one paragraph; style: Body / Subtitle / Uppercase
* **Buttons** — two buttons, each with label (blank = hidden), link, and outline-style toggle

💡 **Pro tip:** The default homepage ends with an image banner — use it as your "brand manifesto" moment: full-bleed campaign shot, overlay at 20–30%, one short line, one button. For hero use at the top of the page, prefer **Height: Large** + **Optimize for transparent header**.


---

# 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 dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://sitesbyseth.gitbook.io/sitesbyseth-docs/reign/sections/image-banner.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.