sw-ui-background

Decorative full-bleed background that progressively reveals a high-resolution image — a blurred thumbnail shows immediately, then crossfades to the full image once it has finished loading.

1 <sw-ui-background
2   src="/images/hero.jpg"
3   thumbnail-src="/images/hero-blur.jpg"
4 ></sw-ui-background>

The component owns two stacked layers:

A blurred-thumbnail layer driven by a data: URL (small, encoded inline) so something visible paints on first frame.
An <img> that crossfades in (opacity: 0 → 1, slight transform: scale settle) when its load event fires.

Set default to use the built-in SignalWire brand background; otherwise supply your own thumbnail (data URL) and src (full image URL). Designed to be slotted into <sw-ui-call-layout>’s background slot or <sw-call-widget>’s background slot.

Class: SwUiBackground · Module: packages/web-components/src/components/UI/layout/sw-ui-background.ts

class: `SwUiBackground`, `sw-ui-background`

Fields

default

booleanDefaults to false

default field.

thumbnail

string | undefined

thumbnail field.

src

string | undefined

src field.

blurAmount

stringDefaults to '20px'

blurAmount field.

Attributes

Name	Field	Inherited From
`default`	default
`thumbnail`	thumbnail
`src`	src
`blur-amount`	blurAmount

CSS Parts

Name	Description
`thumb`	The blurred low-res thumbnail layer (initially visible).
`image`	The full-resolution `<img>` layer that fades in once loaded.

class: SwUiBackground, sw-ui-background