# Overlapping media with content

{% hint style="info" %}
In [Cornerstone v3.0](https://help.fluorescent.co/cornerstone/readme/changelog#id-3.0.0), Overlapping media with content combined and replaced Image with content and Video with content. Upon updating, your original sections will remain in place with added settings. Review your sections before publishing. Learn how to [update your theme](https://help.fluorescent.co/cornerstone/general/theme-updates).
{% endhint %}

Use the **Overlapping media with content** section to combine overlaying media with text content and a button. Use images or an autoplay video.

<figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FlRdP9m2GHrTlLDiSVU49%2Fimage-content-barista.jpg?alt=media&#x26;token=c96e2937-7d8d-4828-adbe-e9a24b4910e7" alt=""><figcaption></figcaption></figure>

<figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FU26ZV9Ml8KoJlmK13iyZ%2Fimage-content-artisan.jpg?alt=media&#x26;token=4a8a01c4-0f25-4b80-834a-da0022dd59ec" alt=""><figcaption></figcaption></figure>

## Set up section

***

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

### Section styles

Sections include general styles. Click the section to find options for **colors**, **spacing**, and **animations**.

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

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

## Set up images

***

* Add a feature **image** and alternate **mobile image**.
* Change the **image aspect ratio** (shape)
* Make the image a clickable **link** to another page.

`Click section for settings`

<table><thead><tr><th width="179">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Image 1</mark></td><td><p>Select a primary image to display in the section. This image will overlay the secondary image (Image 2).<br></p><p>Uncheck Show image for Image 2 to display only the primary image.</p></td></tr><tr><td><mark style="color:blue;">Image caption</mark></td><td>Add small text below Image 1.</td></tr><tr><td><mark style="color:blue;">Show image</mark></td><td>Choose to show a secondary image (Image 2) that overlays the primary image.</td></tr><tr><td><mark style="color:blue;">Image 2</mark></td><td>Select a secondary image that will overlay the primary image.</td></tr><tr><td><mark style="color:blue;">Aspect ratio</mark></td><td>Choose to crop the images to a uniform shape. Select <strong>Portrait (2:3)</strong>, <strong>Portrait (4:5)</strong>, <strong>Square (1:1)</strong>, <strong>Landscape (5:4)</strong>, or <strong>Landscape (3:2)</strong>. Select <strong>Natural</strong> to display images in their original shape (without cropping).</td></tr><tr><td><mark style="color:blue;">Image focal point</mark></td><td>Select the most important part of the images to keep centered. Use focal points to avoid unwanted cropping across different screen sizes.</td></tr></tbody></table>

### Change image layout

***

After uploading an image, adjust the **width** and **position.**

`Click section for settings`

<table><thead><tr><th width="165">Setting</th><th width="405">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Image width</mark></td><td>Set the maximum width of the image area on desktop.</td><td><strong>30 - 60</strong> %</td></tr><tr><td><mark style="color:blue;">Desktop image position</mark></td><td>Position the image to the left or right of the text content.</td><td><strong>Left of content</strong><br><strong>Right of content</strong></td></tr><tr><td><mark style="color:blue;">Mobile image position</mark></td><td>On mobile, show the image before or after the content area .</td><td><strong>Above content</strong><br><strong>Below content</strong></td></tr></tbody></table>

## Set up autoplay video

***

In the section settings, upload short video (without sound) to autoplay. After uploading your video, you can select the **focal point** of your video.

{% tabs %}
{% tab title="Video requirements" %}
For **autoplay videos**, make sure your video files meet the following requirements:

<table data-header-hidden><thead><tr><th width="210"></th><th></th></tr></thead><tbody><tr><td><strong>Video file type</strong></td><td><code>.mp4</code> or <code>.mov</code><br><br><em>Embedded YouTube or Vimeo videos are not supported</em>.</td></tr><tr><td><strong>Video length</strong></td><td>&#x3C; 20 seconds (Recommended)</td></tr><tr><td><strong>Video size</strong></td><td>&#x3C; 10MB (Recommended)</td></tr></tbody></table>
{% endtab %}
{% endtabs %}

`Click section for settings`

<table><thead><tr><th width="194">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Video</mark></td><td>Select or upload a video that autoplays (without sound).</td></tr><tr><td><mark style="color:blue;">Video aspect ratio</mark></td><td>Choose to crop the video to a uniform shape. Select <strong>Portrait (2:3)</strong>, <strong>Portrait (4:5)</strong>, <strong>Square (1:1)</strong>, <strong>Landscape (5:4)</strong>, or <strong>Landscape (3:2)</strong>.<br><br>Select <strong>Natural</strong> to display the video in its original shape (without cropping).</td></tr><tr><td><mark style="color:blue;">Video focal point</mark></td><td>For desktop and mobile, specify the main focus of the video. The focal point will remain centered and within frame to avoid unwanted cropping.</td></tr><tr><td><mark style="color:blue;">Video caption</mark></td><td>Enter text to display a small caption below the video.</td></tr></tbody></table>

## Add content blocks

***

Use blocks to customize the content area of the section. Click **(+) Add block** to add text, buttons, and other media. Use the drag handles **`⋮⋮`** to re-order blocks, and change the layout in the section settings.

<div><figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FWpPCYcBnxJ7gJK27tZP0%2Fcontent-blocks.png?alt=media&#x26;token=ce14a103-e169-4e00-85db-8d29e3f830e6" alt="" width="212"><figcaption></figcaption></figure> <figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FKuqYPr6WhFEJjniMYgYN%2Fcontent-blocks-left.png?alt=media&#x26;token=2db579fe-c354-46ff-a11d-f6f2603e6bde" alt="" width="268"><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>Accent</strong></mark></td><td>Add small label heading.</td><td><a href="../content-blocks#accent">#accent</a></td></tr><tr><td><mark style="color:blue;"><strong>Heading</strong></mark></td><td>Add title heading.</td><td><a href="../content-blocks#heading">#heading</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="../content-blocks#text">#text</a></td></tr><tr><td><mark style="color:blue;"><strong>Button</strong></mark></td><td>Add buttons with custom styles.</td><td><a href="../content-blocks#button">#button</a></td></tr><tr><td><mark style="color:blue;"><strong>Image</strong></mark></td><td>Add images with custom sizes.</td><td><a href="../content-blocks#image">#image</a></td></tr><tr><td><mark style="color:blue;"><strong>Divider</strong></mark></td><td>Add border between blocks.</td><td><a href="../content-blocks#divider">#divider</a></td></tr><tr><td><mark style="color:blue;"><strong>Spacer</strong></mark></td><td>Add space between blocks.</td><td><a href="../content-blocks#spacer">#spacer</a></td></tr><tr><td><mark style="color:blue;"><strong>Video player</strong></mark></td><td>Add video that plays in a popup viewer.</td><td><a href="../content-blocks#video-player">#video-player</a></td></tr><tr><td><mark style="color:blue;"><strong>Text list with icons</strong></mark></td><td>Add column text with icons.</td><td><a href="../content-blocks#text-list-with-icons">#text-list-with-icons</a></td></tr></tbody></table>

### Change content layout

***

In the section settings, change the **width** and **alignment** of the content blocks area.

`Click section for settings`

<table><thead><tr><th width="153">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Content width</mark></td><td>Display the section at <strong>full width</strong> or set a <strong>custom width</strong></td></tr><tr><td><mark style="color:blue;">Custom width</mark></td><td>Set the maximum width of the section: between <strong>400</strong> and <strong>800 px</strong>.</td></tr><tr><td><mark style="color:blue;">Alignment</mark></td><td>Choose to align the content blocks to the <strong>Left</strong>, <strong>Center</strong>, or <strong>Right</strong> within the content area.</td></tr></tbody></table>

\\

***

#### Related sections

<table data-view="cards"><thead><tr><th data-type="content-ref"></th></tr></thead><tbody><tr><td><a href="image-hero">image-hero</a></td></tr><tr><td><a href="grid">grid</a></td></tr><tr><td><a href="video-hero">video-hero</a></td></tr><tr><td><a href="media-with-content-split">media-with-content-split</a></td></tr><tr><td><a href="featured-collection-with-media">featured-collection-with-media</a></td></tr></tbody></table>


---

# 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/cornerstone/pages/theme-sections/media-with-content.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.