> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/avante-themes/features-and-advanced-setup/background-animation.md).
# Background animation
Make the image or video behind a section move as shoppers scroll: parallax, sticky, or zoom. Set it once for the store and override it in any section.
Choose one effect for the whole store, then change it only in the sections that need something different.
{% hint style="info" %}
**Theme Editor → Theme settings → Animation → Banner background animation**
{% endhint %}
***
### **Effects**
* **Parallax** — the background moves at a different speed than the page, which adds depth. Choose the **Direction** (Vertical or Horizontal) and the **Speed**. A negative speed moves the background the other way.
* **Sticky** — the background stays in place while the section content scrolls over it.
* **Zoom in** / **Zoom out** — the background scales smoothly as the section passes through the screen. **Zoom** sets how far, from 105% to 150%.
* **Static** — no movement. This is the default, so backgrounds stay still until you choose an effect.
***
{% stepper %}
{% step %}
#### **Choose the store-wide effect**
In [**Theme settings → Animation**](/docs/avante-themes/theme-settings/animation.md) → **Banner background animation**, choose an **On scroll** effect and adjust its direction, speed, or zoom. Every supported section uses these values by default.
{% endstep %}
{% step %}
#### **Adjust it for phones**
Turn on **Enable custom animation on mobile** to set a separate direction, speed, or zoom for screens up to 920px wide. When it is off, phones use the same values as desktop.
{% endstep %}
{% step %}
#### **Override it in a section**
Open the section and go to **Background animation → Animation**:
* **Default** — uses the values from Theme settings.
* **Disable** — no movement in this section.
* **Customize** — the section gets its own **On scroll** effect and the same direction, speed, zoom, and mobile controls.
{% endstep %}
{% endstepper %}
***
### **Good to know**
Parallax and zoom load the background slightly wider than the screen so its edges never show. Keep important details away from the edges of the image. See [Image & video size recommendations](/docs/avante-themes/faq/performance/image-and-video-size-recommendations.md).
Shoppers who turn on reduced motion in their device settings see parallax and zoom backgrounds without movement.
**Static** is available only in Theme settings. To stop the movement in one section, set its **Animation** to **Disable**.
**Sticky is not offered everywhere.** [Slideshow with media](/docs/avante-themes/sections/banners/slideshow-with-media.md) and [Split banner](/docs/avante-themes/sections/banners/split-banner.md) carry only **Parallax**, **Zoom in** and **Zoom out**.
***
### **Supported sections**
Sections with background animation
* [Image banner](/docs/avante-themes/sections/banners/image-banner.md)
* [Video banner](/docs/avante-themes/sections/banners/video-banner.md)
* [Slideshow with media](/docs/avante-themes/sections/banners/slideshow-with-media.md)
* [Split banner](/docs/avante-themes/sections/banners/split-banner.md)
* [Fullscreen banner with product](/docs/avante-themes/sections/banners/fullscreen-banner-with-product.md)
* [Footer reveal](/docs/avante-themes/global-sections/footer-group/footer-reveal.md)
* [Newsletter](/docs/avante-themes/sections/call-to-action/contact-form-and-newsletter.md)
* [Featured collection with product grid](/docs/avante-themes/sections/collections/featured-collection-with-product-grid.md)
* Blog post, Collection with sticky image, Featured collection tabs, Featured collection with media, Media with side tabs, Media with text, New arrivals collection, New arrivals tabs, and Video
***
### **Common issues**
The background does not move
* The section's **Animation** is set to **Disable**.
* The section uses **Default**, and **On scroll** in Theme settings is **Static**.
* Reduced motion is turned on in the device settings.
***
### **Related**
* [Animation](/docs/avante-themes/theme-settings/animation.md) — all theme-wide motion settings
* [Reveal animation](/docs/avante-themes/features-and-advanced-setup/reveal-animation.md) — content that fades in on scroll
* [Banners](/docs/avante-themes/sections/banners.md) — all ten banner sections
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://staylime.com/docs/avante-themes/features-and-advanced-setup/background-animation.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
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.