> 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/skeleton/sections/image-banner.md).

# Image banner

The full-width hero: a photo or looping video with a heading, a line of text, and up to two buttons on top. This is the default first section on the homepage.

**Where to use it:** the top of the homepage, or anywhere you want a big visual break — a lookbook page, a landing page for a drop.

## Settings

* **Image** — the background photo. Use a landscape image at least 2000 px wide.
* **Video** — takes priority over the image when set. Plays muted on a loop, like a hero background. Upload a short, compressed clip (10–20 seconds).
* **Banner height** (30–100vh, default 70) — the banner's height as a percentage of the visitor's screen. 100 = full screen.
* **Overlay opacity** (0–80%, default 20) — a dark layer between the media and the text. Raise it until your text is comfortably readable.
* **Text color** (default `#FFFFFF`).
* **Content alignment** — left, center, or right.
* **Vertical position** — **Top**, **Middle** (default), or **Bottom**. Bottom-left is a classic streetwear composition.

## Blocks

### Heading (1 max)

* **Heading** — the big line (default "New arrivals"). One to three words reads best.

### Text (1 max)

* **Text** — one supporting line (default "Limited drops. No restocks.").

### Buttons (1 max)

* **First button label** (default "Shop now") and **First button link** — link to a collection, product, or page.
* **First button style** — **Solid** (black/white) or **Accent** (your accent color, default).
* **Second button label** and **Second button link** — optional; leave the label empty to show only one button.

Remove any block you don't want — an image-only banner with no text is a valid look.

💡 **Pro tip:** shoot (or crop) your hero with the subject in the middle 60% of the frame. Phones show a much narrower slice of the image than desktops, so anything near the left/right edges disappears on mobile. Preview both by clicking the desktop/mobile icons at the top of the theme editor.


---

# 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/skeleton/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.