# Headers and backgrounds

With `"titlebar": "overlay"`, the page runs up behind the window's buttons. That's where a header
image or a gradient goes.

```json
{ "titlebar": "overlay", "background": "none" }
```

```css
html { background: #07070b; }
body::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 200px;
  background: url(sky.jpg) center top / cover;
  mask-image: linear-gradient(black 30%, transparent);
}
.titlebar { height: var(--offsider-safe-top); padding-left: var(--offsider-titlebar-leading); }
```

- **How tall the titlebar is.** `safeAreaInsets.top` in the context, and the
  `--offsider-safe-top` CSS variable once `offsider.js` has loaded.
- **Where the buttons end.** `titlebarLeading` in the context, and the
  `--offsider-titlebar-leading` CSS variable: start a heading in the strip there, so it clears them.
- **The strip is where the window drags from.** Text and images there are fine. A control such as
  a sidebar button needs `data-offsider-titlebar-control`; `offsider.js` tells Offsider where those
  elements are, and clicks on them reach the page instead of dragging the window.

```html
<button data-offsider-titlebar-control aria-label="Toggle sidebar">…</button>
```