> For the complete documentation index, see [llms.txt](https://analog.groupthought.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://analog.groupthought.com/building-pages/backgrounds.md).

# Layered backgrounds

Use Banner for one background image or video, or Banner layers to stack and position several background blocks.

Two sections put content over background media. Banner uses one image or video. Banner layers stacks Background layer blocks for collages, marquees, split images, and pattern text. Each layer can use a different parallax amount.

<figure><img src="https://256838974-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDFCPNagZLqTjKwJXAF6W%2Fuploads%2Fgit-blob-332f16e4c1fcdb9081ee6f33a95dd963d336c237%2Fbanner-layers.jpg?alt=media" alt="A Banner layers hero composed from stacked background blocks"><figcaption><p>Banner layers: several layer blocks stacked into one composition, each configured on its own.</p></figcaption></figure>

## Stacking order

A banner has background media, an overlay, and content. Banner has one media slot. Banner layers replaces that slot with a list of layers. Blocks near the top of the list render in front of blocks below them. Content renders above all background layers.

Both sections use "Placement" and "Alignment" for content. They default to the opposite color scheme to keep text readable over an image. See [color](/core-concepts/color.md).

|            | Banner                             | Banner layers                                          |
| ---------- | ---------------------------------- | ------------------------------------------------------ |
| Background | One image or video plus an overlay | A stack of layer blocks inside Background layer blocks |
| Parallax   | One theme-wide rate for the media  | Per layer                                              |
| Use for    | A photo or video behind text       | Anything one flat image cannot do                      |

## Banner

Set "Type" to "Image" or "Video". Add "Image mobile" to use different art on phones. When a mobile image is set, phones don't preload the desktop image.

Use "Height" to select a screen fraction from "Full screen height" to "One quarter screen", "Custom" for a px/% value, or "Media height". "Media height" sizes the section from the media. "Set mobile height" overrides the value on phones.

"Overlay opacity" and "Overlay color" adjust contrast between the background and content. The default is black at 8. Most photos work between 8 and 20.

The background scrolls with the theme-wide parallax rate, "Parallax strength" in Theme settings › Advanced (default 14).

{% hint style="info" %}
Parallax turns off when "Height" is "Media height". The media already defines the section's size, so there is no extra image to move as the page scrolls. Pick a screen fraction or a custom height to keep parallax.
{% endhint %}

The remaining groups match other sections. "Contain section" limits the banner to a width and adds its own spacing. "Content width", "Placement", "Alignment", and "Padding" position the content. "Enable transparent header" allows the header to overlap the top of the banner.

## Banner layers

The section accepts Background layer blocks. Its static Content block holds the text and buttons above them. Each Background layer has three settings groups:

* Overlay: "Opacity" and "Color" render above everything inside the group.
* Parallax: "Set parallax amount" opens "Parallax amount" (−100 to 100). Off, the group scrolls at the theme's "Parallax strength".
* "Limit by screen size": show the group on one device only, so mobile and desktop can get different backgrounds.

Add a second Background layer to give part of the composition its own overlay. The "Countdown banner with layers" preset uses two: collage images and a marquee under one, pattern text under another at 80 opacity.

### The layer blocks

| Layer block                                 | What it renders                                                            |
| ------------------------------------------- | -------------------------------------------------------------------------- |
| Banner image (`_background-image`)          | A full background image or video with its own overlay                      |
| Split images (`_background-split`)          | Two media panes, side by side or stacked, each with its own overlay        |
| Collage image (`_background-collage-image`) | One positioned image with size, rotation, clip mask, and parallax controls |
| Marquee (`_background-marquee`)             | A scrolling band of Spotlight text and Image blocks, rotatable             |
| Pattern text (`_background-pattern-text`)   | Repeating text fill across the whole layer                                 |

### Stacking order

Each block list runs front to back. The first Background layer renders in front of the second. Inside a group, the first layer block renders in front of the next. The group's overlay renders above its layers. The Content block renders above everything.

### Per-layer parallax

Each Collage image has "Set parallax amount", "Amount" (−100 to 100), and "Direction" ("↓" or "→"). Positive values move against the scroll direction. Negative values move with it. Two images at −50 and 50 move apart as the page scrolls. Set the Background layer's "Parallax amount" to 0 to keep the group in place while its Collage images move.

## Inside a Pair

A [Pair](/building-pages/pair.md) column can use the same Background layer blocks inside a Banner layers block. This puts a layered background beside another column. Its height comes from the Pair section instead of a separate height setting.

## Recipes

### Photo hero

Use a Banner with a screen-fraction height and a light overlay:

* Background media › Type: "Image"
* Section layout › Height: "One half screen"
* Appearance › Overlay opacity: 15
* Blocks: heading, rich text, button

### Parallax collage

Use one Background layer holding collage images with opposing parallax:

* Blocks: Background layer holding a Marquee and two Collage images
* Background layer › Set parallax amount: on
* Background layer › Parallax amount: 0
* Collage image (first) › Set parallax amount: on, Amount: −50
* Collage image (second) › Set parallax amount: on, Amount: 50

### Type as texture

Use Pattern text under a strong overlay for a text-only background:

* Blocks: one Background layer holding a Marquee, a second holding Pattern text
* Background layer (second) › Opacity: 80
* Pattern text › Text: "SALE"
* Pattern text › Enable highlight: on

## See also

* [Pair sections](/building-pages/pair.md): the two-column layout that accepts a Banner layers block
* [The Custom section](/building-pages/custom-section.md): vertical stacks without a background
* [Color](/core-concepts/color.md): the opposite-scheme default
* [Settings cascade](/core-concepts/settings-cascade.md): block, section, and theme settings