> For the complete documentation index, see [llms.txt](https://docs.webexp.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webexp.dev/drift-shopify-theme/drift-studio/theme-settings/background.md).

# DRIFT — Background

Replaces DRIFT's solid background with an image or video across the entire store. This is a **DRIFT Studio** feature.

## How to access

**Theme settings → DRIFT — Background**

## Settings

### Enable image/video background

Master switch. When off, DRIFT uses solid backgrounds (light: `#FAFAFA`, dark: `#0A0A0A`).

### Background image

Used for both light and dark modes. If a dark mode image is also uploaded, this becomes the light mode image.

### Dark mode image (optional)

Overrides the background image when the site is in dark mode. Leave empty to use one image for both modes.

### Video URL

Direct URL to an MP4 file. Upload your video to **Settings → Files** in the Shopify admin and paste the public URL here. The video autoplays muted and loops. If both an image and a video are set, the image displays on top.

### Background blur

Range from 0 to 20 pixels. Blurs the background media so site content stays the focus.

### Invert media in dark mode

Inverts the colors of the background image or video when the site is in dark mode. Lets you use one image for both modes without uploading a separate dark version. Works best with graphics, patterns, and illustrations.

### Auto overlay

Adds a mode-aware color overlay on top of the background for better text readability. Light mode gets a light overlay, dark mode gets a dark overlay.

### Overlay opacity

Range from 0% to 100%. How strong the overlay is. Higher values hide more of the background.

## Live Gradient

A WebGL-rendered color gradient that moves slowly across your site on every page (homepage, PDPs, collection, cart, password page, everything). The shader continuously animates a 4-color mesh derived from a single seed color per mode. Replaces the solid background when enabled. Mutually exclusive with image/video background — turn off Enable image/video background first.

### Enable Live Gradient

Master switch. When on, the Live Gradient renders on every page and the image/video background settings are ignored.

### Gradient color (light mode)

Seed color used to derive the 4-color palette in light mode. The theme generates lighter/darker variants automatically via HSL math. Default `#FAFAFA`.

### Gradient color (dark mode)

Seed color used in dark mode. Default `#070707`.

### Gradient grain intensity

Range 0–100%. Film grain texture overlaid on the gradient. 0 = clean. Higher values trade tasteful for retro/lo-fi. Default 90%.

## Per-product overrides on the Product Feed (Studio only)

When Live Gradient is enabled AND **Enable per-product background overrides** is on in the DRIFT Product Feed section, the active swiped slide can override the Live Gradient palette per product via metafields:

* `custom.feed_bg_color` (color metafield) — the active product's color becomes the Live Gradient seed; the palette derives around it
* `custom.feed_bg_media` (file metafield) — image or video takes over completely, replacing the Live Gradient on that slide

The override carries through to the product's PDP — clicking a product keeps the same Live Gradient palette as you saw on the feed slide.

See [Feed background color](https://github.com/cec-hdz/webexp-docs/blob/main/drift-studio/metafields/feed-bg-color.md) and [Feed background media](https://github.com/cec-hdz/webexp-docs/blob/main/drift-studio/metafields/feed-bg-media.md) for details.

## Performance notes

* Live Gradient adds about 6KB of WebGL shader JS + a small noise PNG asset. Lazy-loaded after first paint.
* Continuous GPU usage while shoppers are on the site. Negligible on desktop. On lower-end mobile devices, the gradient animation may impact battery slightly.
* The shader respects `prefers-reduced-motion` — shoppers who've opted out of motion see the static gradient with no motion.