# Image

Displays a background image with optional overlay text and a call-to-action button for visual impact.

{% hint style="warning" %}
You can only choose two blocks to be shown at a time.
{% endhint %}

<figure><img src="https://891064830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz8oqtXqtdhOM4CxRzekr%2Fuploads%2F2uSFvielF8Ple0mje9UE%2Fimage-block.gif?alt=media&#x26;token=e67b078a-8be7-4ffa-bc29-4844a558c9e8" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="197.6339111328125">Settings</th><th width="145.70703125" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td><strong>Layout</strong></td><td align="center"></td><td></td></tr><tr><td>Content alignment</td><td align="center"><code>select</code></td><td>Determines the alignment of text and button content within the block: <code>Top left</code>, <code>Center</code>, <code>Top right</code> and etc.</td></tr><tr><td><strong>Image</strong></td><td align="center"></td><td></td></tr><tr><td>Image</td><td align="center"><code>image_picker</code></td><td>Upload or select an image to display in the block.</td></tr><tr><td>Overlay type</td><td align="center"><code>select</code></td><td>Add an opacity or text underlay: <code>Disabled</code>, <code>Opacity</code>, or <code>Text underlay</code>.</td></tr><tr><td><strong>Text</strong></td><td align="center"></td><td></td></tr><tr><td>Heading</td><td align="center"><code>text</code></td><td>Input for the main headline or title displayed over the image.</td></tr><tr><td>Heading size</td><td align="center"><code>range</code></td><td>Controls the size of the heading text.</td></tr><tr><td>Text</td><td align="center"><code>richtext</code></td><td>Area for adding descriptive or supporting text content.</td></tr><tr><td>Text size</td><td align="center"><code>range</code></td><td>Adjusts the size of the text content.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Show text background</td><td align="center"><code>checkbox</code></td><td>Adds a colored background behind text.</td></tr><tr><td>Background</td><td align="center"><code>color</code></td><td>Override color scheme for background.</td></tr><tr><td>Text</td><td align="center"><code>color</code></td><td>Override color scheme for text.</td></tr><tr><td><strong>Button</strong></td><td align="center"></td><td></td></tr><tr><td>Text</td><td align="center"><code>text</code></td><td>Label text that appears on the button.</td></tr><tr><td>Link</td><td align="center"><code>url</code></td><td>URL that the button will navigate to when clicked.</td></tr><tr><td>Button color</td><td align="center"><code>select</code></td><td>Defines the visual color theme of the button: <code>Primary</code>, <code>White</code>, <code>Black</code>, or <code>Secondary</code>.</td></tr><tr><td>Button style</td><td align="center"><code>select</code></td><td>Sets the visual style of the button: <code>Solid</code>, <code>Outline</code>, <code>Text</code> and etc.</td></tr><tr><td>Size</td><td align="center"><code>select</code></td><td>Controls the button’s size: <code>Small</code>, <code>Medium</code>, or <code>Large</code>.</td></tr></tbody></table>
