---
title: Backdrop
description: A faint landscape or dot pattern fixed to the bottom of the page. Gives the page ground without competing with content.
---

```tsx
import { Backdrop } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function BackdropBasic() {
  return (
    <Preview block={true}>
      <div className="relative isolate h-64">
        <Backdrop.Root className="absolute h-full" />
      </div>
    </Preview>
  );
}
```

- Use one behind application and standalone pages. It covers about the lower half of the viewport, fades in from the top and stays faint in both themes.
- It draws dots by default. Pass `image` with `avif` and `webp` sources to draw a landscape instead. Choosing the image, such as one per palette, is up to the app; pass per-image adjustments through `className`.
- It is fixed behind the content, so render it inside an element that creates a stacking context: `Shell.Root` or `Standalone.Root`. Inside `Shell.Root` it starts after the sidebar from `md` up.
- It is decorative: hidden from assistive technology and ignores the pointer.

## API

| Prop | Type | Default | Description |
| - | - | - | - |
| `image?` | `{ avif: string; webp: string }` | - | Draws the image instead of the dot pattern. |

Parts: `Root`. Other props go to the native `div`.