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


---

# 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://palo-alto.presidiocreative.com/sections/sections/banners/image-with-scrolling-text.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.