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

# 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>