Interactive demo

Background booth

Control background fit and position while the package handles loading and placeholders.

BackgroundImage

preloaded CSS backgrounds

Content stays real DOM while the package handles background image loading and reveal state.

Placeholder

Reveal

Background fit

Position

Replay

<BackgroundImage
  src="/hero.jpg"
  width="100%"
  height="520px"
  fit="cover"
  position="center"
  placeholder="blur"
  fadeType="soft-reveal"
>
  <h1>Real content over a loaded CSS background</h1>
</BackgroundImage>