> For the complete documentation index, see [llms.txt](https://palo-alto.presidiocreative.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://palo-alto.presidiocreative.com/sections/sections/banners/image-with-scrolling-text.md).

# Image with scrolling text

The Image with scrolling text section is a mix of our Banner image and Marquee sections. It's designed to display an image with overlaid text that scrolls across the screen.

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

## Section settings

<table><thead><tr><th width="263.7314453125">Settings</th><th width="146.5654296875" align="center">Type</th><th>Description</th></tr></thead><tbody><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>Desktop image. Recommended width: 2048px.</td></tr><tr><td>Mobile image</td><td align="center"><code>image_picker</code></td><td>Optional image shown on mobile devices.</td></tr><tr><td>Overlay type</td><td align="center"><code>select</code></td><td>Add an opacity or text underlay: <code>Disabled</code> and <code>Opacity overlay</code>.</td></tr><tr><td>Space between messages</td><td align="center"><code>range</code></td><td>Space between scrolling messages.</td></tr><tr><td>Autoplay speed</td><td align="center"><code>range</code></td><td>Speed of scrolling text.</td></tr><tr><td><strong>Layout</strong></td><td align="center"></td><td></td></tr><tr><td>Height</td><td align="center"><code>select</code></td><td>Choose the image section height.</td></tr><tr><td>Enable mobile height</td><td align="center"><code>checkbox</code></td><td>Toggles separate height for mobile.</td></tr><tr><td>Mobile height</td><td align="center"><code>select</code></td><td>Height for mobile view.</td></tr><tr><td><strong>Animations</strong></td><td align="center"></td><td></td></tr><tr><td>Loading style</td><td align="center"><code>select</code></td><td>Entrance animation: <code>Slide</code>, <code>Fade</code>, <code>Zoom out</code>, or <code>Wipe</code>.</td></tr><tr><td>Enable zoom animation on scroll</td><td align="center"><code>checkbox</code></td><td>Zooms image on scroll.</td></tr><tr><td>Enable card scrolling effect</td><td align="center"><code>checkbox</code></td><td>Creates an overlapping card effect with the next section.</td></tr><tr><td>Increase border radius</td><td align="center"><code>checkbox</code></td><td>Around the top corners of the next section, when the card scrolling is on.</td></tr><tr><td><strong>Text</strong></td><td align="center"></td><td></td></tr><tr><td>Text alignment</td><td align="center"><code>select</code></td><td>Align text vertically: <code>Top</code>, <code>Center</code>, or <code>Bottom</code>.</td></tr><tr><td>Scrolling text color</td><td align="center"><code>color</code></td><td>Choose a color for the scrolling text.</td></tr><tr><td><strong>Scrolling text</strong></td><td align="center"></td><td></td></tr><tr><td>Uppercase text</td><td align="center"><code>checkbox</code></td><td>Converts text to uppercase.</td></tr><tr><td>Font</td><td align="center"><code>font_picker</code></td><td>Font family selection.</td></tr><tr><td>Size</td><td align="center"><code>range</code></td><td>Font size (50–300%).</td></tr><tr><td>Mobile size</td><td align="center"></td><td></td></tr><tr><td>Letter spacing</td><td align="center"><code>range</code></td><td>Adjust the spacing between letters.</td></tr><tr><td>Position</td><td align="center"><code>select</code></td><td>Alignment of scrolling text: <code>Top</code>, <code>Center</code> and <code>Bottom</code>. </td></tr><tr><td>Text direction</td><td align="center"><code>select</code></td><td><code>Left to right</code> or <code>Right to left</code> scrolling.</td></tr><tr><td><strong>Color</strong></td><td align="center"></td><td></td></tr><tr><td>Color scheme</td><td align="center"><code>color_scheme</code></td><td>Applies a predefined theme color scheme to the section.</td></tr><tr><td><strong>Section spacing</strong></td><td align="center"></td><td></td></tr><tr><td>Padding top</td><td align="center"><code>range</code></td><td>Space above section.</td></tr><tr><td>Padding bottom</td><td align="center"><code>range</code></td><td>Space below section.</td></tr></tbody></table>