> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/eclipse/sections/image-hero.md).

# Image hero

{% hint style="info" %}
The Image hero section was added in v1.2.0 — [Update your theme](/eclipse/changelog/update-your-theme.md) 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](/eclipse/pages/templates/using-templates.md) for different page layouts, or [show dynamic page content](/eclipse/general/editing-themes/dynamic-content-with-metafields.md) 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="/pages/0MflR16gsRx15gkF5SmR#section-colors">/pages/0MflR16gsRx15gkF5SmR#section-colors</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section width</strong></mark></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#section-width">/pages/3wq6hFMr3k1BDOHIgjqZ#section-width</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section padding</strong></mark></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding">/pages/3wq6hFMr3k1BDOHIgjqZ#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="/pages/3wq6hFMr3k1BDOHIgjqZ#overlay-colors">/pages/3wq6hFMr3k1BDOHIgjqZ#overlay-colors</a></td><td><a href="/files/r6qvEikOKVMq5Hv30JkJ">/files/r6qvEikOKVMq5Hv30JkJ</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="/files/y6QvuNTjUyDpm7r7AO5y" alt="" width="375"><figcaption></figcaption></figure> <figure><img src="/files/ilLCbPLKSa8N4nzH3WMB" 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="/pages/1RQDWwxKzKWmtVBL177n#overline-block">/pages/1RQDWwxKzKWmtVBL177n#overline-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Heading</strong></mark></td><td>Add title heading.</td><td><a href="/pages/1RQDWwxKzKWmtVBL177n#heading-block">/pages/1RQDWwxKzKWmtVBL177n#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="/pages/1RQDWwxKzKWmtVBL177n#text-block">/pages/1RQDWwxKzKWmtVBL177n#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="/pages/1RQDWwxKzKWmtVBL177n#button-block">/pages/1RQDWwxKzKWmtVBL177n#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="/pages/1RQDWwxKzKWmtVBL177n#image-block">/pages/1RQDWwxKzKWmtVBL177n#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="/pages/1RQDWwxKzKWmtVBL177n#spacer-block">/pages/1RQDWwxKzKWmtVBL177n#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="/pages/1RQDWwxKzKWmtVBL177n#divider-block">/pages/1RQDWwxKzKWmtVBL177n#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="/pages/1RQDWwxKzKWmtVBL177n#liquid-block">/pages/1RQDWwxKzKWmtVBL177n#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.