# Image banner

Fully customizable image banner section with options for mobile and desktop devices including support for multiple buttons, and text options:

<figure><img src="/files/GNssRQqoZRyNGBhxCuUW" alt=""><figcaption><p><strong>Image banner blocks let you fully customize the message and call to action buttons</strong></p></figcaption></figure>

### Modern design elements

Creative design options built-in. Simply add section padding to the top and width for a modern rounded style banner:

<figure><img src="/files/3aLsZ8OZCKkbqLGq5rAc" alt=""><figcaption><p><strong>Wide range of secton controls</strong></p></figcaption></figure>

{% hint style="success" %}
***Tip:*** Set "Image corners" to "Rounded" in the Theme settings -> Layout
{% endhint %}

### Mobile banner

Choose a custom image for mobile devices to simplify mobile messaging:

<figure><img src="/files/EJr60dayfmgmwZkuviI4" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
***Pro tip***: To remove image cropping on your banner images:

1. Set the "Section height" to: "Image height".
2. In the Theme settings -> Layout, uncheck "Parallax images" under animations.&#x20;

***

Combining both, no parallax image animation and image height for the section height settings will ensure there is no image cropping with your banner image.
{% endhint %}

### Transparent header

Turn on transparency in the header to integrate the header and banner image section together:

<figure><img src="/files/AaKYPPJ8I6qeTh8FYRtq" alt=""><figcaption></figcaption></figure>

#### How to

1. In the Header settings, activate the transparent header option and also add an "Alternate logo" for your brand that best appears over the banner (our regular logo is black, and the alternate is white):

<figure><img src="/files/4hMl4QEzrgHdhXgyUXhw" alt=""><figcaption></figcaption></figure>

2. In the section settings for the Image banner, set the section width to "Full width" and remove any "Padding top", set that to zero:

<figure><img src="/files/TxvPpkDxRZwFpnfzF31I" alt=""><figcaption></figcaption></figure>


---

# 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://story.groupthought.com/sections/story-sections/image-banner.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.