# Parallax with graphic

The parallax with graphic section creates a full-height parallax scrolling effect with an optional floating graphic overlay. It is designed to deliver visually immersive storytelling, often used for branding, campaigns, or editorial highlights.

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

#### Graphic

Defines the image used as the floating graphic overlay. A .webp file with a transparent background is recommended for best visual results.

#### Graphic link

Specifies a URL destination for the graphic, making it clickable. Leave blank to omit.

#### Width (desktop)

Controls the width of the graphic on desktop devices, measured as a percentage of the container. Default is 40.

#### Width (mobile)

Controls the width of the graphic on mobile devices. Default is 80.

#### Show graphic

Toggles the visibility of the graphic within the parallax section.

#### Invert graphic

Inverts the colors of the graphic, useful for adapting light graphics to dark backgrounds or vice versa.

#### Badge text

Optional text displayed as a badge overlay within the section. Leave blank to omit.

#### Badge style

Defines the visual style of the badge. Default is “None”.

#### Meta text

Optional secondary text displayed alongside or beneath the main content for additional context or detail.

#### Grid columns (desktop)

Sets the number of grid columns used in the section layout on desktop. Default is 1 for full-width parallax presentation.

#### Grid columns (mobile)

Sets the number of grid columns used on mobile devices. Default is 1 for full-width display.

#### Slide height (desktop)

Defines the height of the parallax section on desktop, measured as a percentage of the viewport height. Default is 100 for full-screen effect.

#### Slide height (mobile)

Defines the height of the parallax section on mobile devices. Default is 100 for full-screen coverage.

#### Foreground

Sets the text color used within the section. Default is white (#FFFFFF) for strong contrast over imagery.

#### Text transform

Controls text casing behavior. Set to “Inherit” to preserve original formatting.

#### Vertical spacing

Controls the spacing around the section to adjust its separation from surrounding content.

#### Vertical spacing (desktop)

Sets the vertical spacing applied on desktop devices. Default is Large.

#### Vertical spacing (mobile)

Sets the vertical spacing applied on mobile devices to ensure consistent spacing across screen sizes.


---

# 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://gatame.gitbook.io/highstreet/dynamic-sections/editorial/parallax-with-graphic.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.