# Image hero

{% hint style="info" %}
The Image hero section was added in v1.2.0 — [Update your theme](https://help.fluorescent.co/eclipse/changelog/update-your-theme) to access new features.
{% endhint %}

The **Image hero** section displays a large image banner with overlaid headings, text, and buttons.

{% hint style="warning" %}
**Editing templates will change all pages that use the same template**. [Create new templates](https://help.fluorescent.co/eclipse/pages/templates/using-templates) for different page layouts, or [show dynamic page content](https://help.fluorescent.co/eclipse/general/editing-themes/dynamic-content-with-metafields) in the same template.
{% endhint %}

## Set up section

***

In the editor side panel, click **(+) Add section** and select **Image hero**. Click and hold the drag handles **`⋮⋮`** to re-order sections.

### Section styles

***

Click the section to edit general **section styles** for colors and spacing, available in all sections:

<table data-view="cards"><thead><tr><th align="center"></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td align="center"><mark style="color:blue;"><strong>Section colors</strong></mark></td><td><a href="#section-colors">#section-colors</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section width</strong></mark></td><td><a href="../overview/section-styles#section-width">#section-width</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section padding</strong></mark></td><td><a href="../overview/section-styles#section-padding">#section-padding</a></td><td></td></tr></tbody></table>

## Set up hero image

***

Upload an **Image** and adjust its **Height**, **Focal point**, and color **Overlay** or **Gradient**. Add a **Mobile-specific image** for the best results on smaller screens.

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><mark style="color:blue;"><strong>Using color overlays</strong></mark></td><td>Learn how to change overlay colors and use gradients.</td><td><a href="../overview/section-styles#overlay-colors">#overlay-colors</a></td><td><a href="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FJmND9VbF4HtwEqV18aeb%2Foverlay-color-gradient.png?alt=media&#x26;token=953171f8-094a-43c4-97fe-2c767e76505e">overlay-color-gradient.png</a></td></tr></tbody></table>

`Click Image hero section to find settings`

<table><thead><tr><th width="167">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Image</mark></td><td>Select or upload an image to display as the hero image.<br><br>There are no required images dimensions. We simply recommend uploaded images have a minimum width of <strong><code>2500px</code></strong> for optimal quality across all devices.</td></tr><tr><td><mark style="color:blue;">Mobile image</mark></td><td>Select or upload an alternate image to display on mobile devices.<br><br>You may want a different image that works best with mobile screen dimensions, for example a portrait shaped image.</td></tr><tr><td><mark style="color:blue;">Background link</mark></td><td>Select a page or URL to make the entire image a clickable link.</td></tr><tr><td><mark style="color:blue;">Image animation</mark></td><td>Change the animation style of how the image loads. The image can gradually fade into view or be revealed by an <strong>iris swipe</strong>, which appears as a growing circle. Set to <strong>None</strong> to disable animations.</td></tr></tbody></table>

&#x20;

### Set image height

***

Under **Image height**, choose to display the image with a **Fixed** or **Relative** height.

* **Fixed** heights maintain the same pixel height on all screens.
* **Relative** heights adapt the image height as a percentage of the screen height.

&#x20;

`Click Image hero section to find settings`

<table><thead><tr><th width="160">Setting</th><th width="422">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Desktop height</mark></td><td>Set the section height to a fixed height (in pixels) or relative height (as a percentage of the screen height).</td><td><strong>Fixed height</strong><br>250 - 750px<br><strong>Relative height</strong><br>50 - 100%<br><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 650px</mark></td></tr><tr><td><mark style="color:blue;">Mobile height</mark></td><td>Choose a fixed height (in pixels) or relative height (as a percentage of the screen height).</td><td><strong>Fixed height</strong><br>150 - 750px<br><strong>Relative height</strong><br>50 - 100%<br><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 450px</mark></td></tr></tbody></table>

&#x20;&#x20;

## Add content blocks

***

Click **(+) Add block** to add text and image content to the section. Use the drag handles **`⋮⋮`** to re-order blocks, and add **Spacer** and **Divider** blocks to further customize the layout.

<div><figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2F2bJuQwRSZ37zWPCfgEVZ%2Fcontent-blocks-add.png?alt=media&#x26;token=b226c9a1-d607-4439-8f9a-325707fb411f" alt="" width="375"><figcaption></figcaption></figure> <figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FNBntxSpdVe98DZrI1ykk%2Fcontent-blocks-left.png?alt=media&#x26;token=85ae78d7-8b34-41c6-a957-498bc5352db4" alt="" width="375"><figcaption></figcaption></figure></div>

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><mark style="color:blue;"><strong>Overline</strong></mark></td><td>Add small label heading.</td><td><a href="../overview/content-blocks#overline-block">#overline-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Heading</strong></mark></td><td>Add title heading.</td><td><a href="../overview/content-blocks#heading-block">#heading-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Text</strong></mark></td><td>Add multiple lines of rich text.</td><td><a href="../overview/content-blocks#text-block">#text-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Button</strong></mark></td><td>Add buttons with custom styles.</td><td><a href="../overview/content-blocks#button-block">#button-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Image</strong></mark></td><td>Add images with custom sizes.</td><td><a href="../overview/content-blocks#image-block">#image-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Spacer</strong></mark></td><td>Add space between blocks.</td><td><a href="../overview/content-blocks#spacer-block">#spacer-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Divider</strong></mark></td><td>Add border between blocks.</td><td><a href="../overview/content-blocks#divider-block">#divider-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Custom Liquid</strong></mark></td><td>Add Liquid code block.</td><td><a href="../overview/content-blocks#liquid-block">#liquid-block</a></td></tr></tbody></table>

### Change content layout

***

Change the **position** and **width** of the content blocks that overlay the image.

&#x20;

`Click Image hero section to find settings`

<table><thead><tr><th width="175">Setting</th><th width="323">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Content width</mark></td><td>Use the sliders to set the maximum width (in pixels) of the section content.</td><td><strong>200 - 1000 px</strong> <br><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 500</mark></td></tr><tr><td><mark style="color:blue;">Text position</mark></td><td>Set the position of the text content for desktop screens.</td><td><strong>Top / Middle / Bottom</strong><br><strong>Left / Center / Right</strong></td></tr><tr><td><mark style="color:blue;">Mobile text position</mark></td><td>Set the position of the text content for mobile screens.</td><td><strong>Top / Middle / Bottom</strong><br><strong>Left / Center / Right</strong></td></tr></tbody></table>

&#x20;

## Section colors

***

The section uses two color schemes. The first color scheme applies a section **background** color, and the **overlay** color scheme applies text, button, and overlay tint colors.

### Change background color

***

The section background is visible when the section has **top and bottom** **padding** or when the section width is **page width** or **full width padded**.

In the section settings, select a **color scheme** (at the top of the settings panel) to apply its background color. You can edit the color scheme in your theme settings.


---

# Agent Instructions: 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:

```
GET https://help.fluorescent.co/eclipse/sections/image-hero.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.