# AmbientBackground (/docs/ambient-background)
You're looking at it right now — this docs site renders `AmbientBackground` once, in its root layout, and every page you navigate to (including this one) is the live example.
```tsx
import { AmbientBackground } from "@42-central/ui-react/ambient-background";
// app/layout.tsx
{children}
;
```
Render it once, as the first child of your root layout. It's `position: fixed`, so a single instance covers the whole viewport regardless of scroll position or page height — later content naturally paints over it as long as it's mounted first. It's purely decorative: `aria-hidden`, `pointer-events-none`, and hidden under `forced-colors` (Windows High Contrast Mode), since a background tint has no place overriding a user's forced palette.
The glow and noise are CSS custom properties (`--ambient-glow` / `--ambient-noise`, defined once in `theme.css`, brand-tinted and theme-aware via `data-theme`) rather than hardcoded in the component — override either on `:root` in your own stylesheet to reskin it without forking the component.
Glow and noise render as two independent `position: fixed` elements rather than one wrapper containing two children — nesting the noise layer's blend mode inside a `fixed` wrapper would trap it inside that wrapper's own isolated stacking context, unable to blend against the real page content underneath. The examples below constrain each layer to a bounded box via `classNames` (overriding the default `fixed inset-0 -z-10` on each) purely so they fit inside the preview frame — in real use you pass no props at all.
## Both layers (default) [#both-layers-default]
## Glow only [#glow-only]
Turn off the noise layer with `noise={false}` for just the radial tint.
## Noise only [#noise-only]
Turn off the glow with `glow={false}` for just the grain texture — useful over a background you're already tinting yourself.
## API [#api]
## Accessibility [#accessibility]
`AmbientBackground` is purely decorative:
* `aria-hidden="true"` — assistive tech skips it entirely.
* `pointer-events-none` — it never intercepts clicks or taps meant for real content underneath.
* `forced-colors:hidden` — it disappears under Windows High Contrast Mode, since a decorative tint has no place overriding a user's forced palette there.