CSS backgrounds

BackgroundImage

BackgroundImage brings the same loading experience to CSS background images while keeping real content in the element.

Hero backgrounds

Use width, height, or aspectRatio to reserve space. fit, position, and repeat map to background CSS.

Real content over a preloaded background.

tsx

<BackgroundImage
  src="/images/home/header.jpg"
  width="100%"
  height="100%"
  fit="cover"
  position="center"
  placeholder="color"
  color="#d8d8d8"
  fadeType="soft-reveal"
>
  <div className="heroOverlay">
    <h3>Real content over a preloaded background.</h3>
  </div>
</BackgroundImage>

Element control

Use as for the element type, or asChild to apply background behavior to your own element.

asChild keeps your element

tsx

<BackgroundImage
  src="/images/home/feature2.jpg"
  asChild
  placeholder="blur"
  fadeType="zoom-blur"
>
  <article className="cardDemo">
    <h3>asChild keeps your element</h3>
  </article>
</BackgroundImage>

Try the full demo

Open the focused Background booth playground for the wider controls and live output.

Background booth

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