> 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/story-theme-v1/sections/image-with-text-overlay.md).

# Image with text overlay

Captivate your visitors with single image storefront banner. Image with text overlay brings your brand photography to the forefront. 

#### Headings

Heading, subheading text is placed directly over your brand image allowing search engines to index your storefront. 

![](/files/-MV2xlEPBCb4DeoeTa5j)

#### Flexible

Heading, subheading text and call to action button are placed over the image with several alignment options, colors and card-style background style:

![](/files/-MV3-4O8pGCXX8pgK8fG)

Primary and accent colors options can helpful for key messaging:

![Remove transparent background to show card-style text area](/files/-MV3JmddI-YtHfJz_HTW)

{% hint style="success" %}
**Mobile tip**: Choose Image height for the section height and uncheck parallax scroll to display the entire image on mobile devices. The image will not be cropped with both these settings
{% endhint %}

![When the entire image is needed for mobile devices](/files/-MV3Nqtc1i-tsxA25642)

![](/files/-MV3Qi4hOawzJNtsBU7x)

When image height is used, wide images will have less room for heading and subheading on mobile. Choose a larger height setting in increase your text area for mobile devicse. Place the main subject in the middle/center of your image for best results. 

#### Add section reference:

<div align="left"><img src="/files/-MV--kzyxyxR081TPvks" alt=""></div>