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.

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

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.

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