For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
Log inSign up
Support
GuidesReferenceClick-to-Call
GuidesReferenceClick-to-Call
  • Core
    • Overview
  • Entities
    • SignalWire
    • Address
    • Participant
    • ClientPreferences
    • SelfCapabilities
    • SelfParticipant
    • User
    • WebRTCCall
  • Web Components
    • Overview
    • sw-audio-level
    • sw-call-controls
    • sw-call-dialpad
    • sw-call-media
    • sw-call-provider
    • sw-call-status
    • sw-call-widget
    • sw-click-to-call
    • sw-device-selector
    • sw-directory
    • sw-local-camera
    • sw-participant-controls
    • sw-participants
    • sw-self-media
    • sw-ui-alert
    • sw-ui-background
    • sw-ui-call-layout
    • sw-ui-content-drawer
    • sw-ui-control-bar
    • sw-ui-dialpad
    • sw-ui-dropup
    • sw-ui-icon
    • sw-ui-modal
    • sw-ui-responsive-container
    • sw-ui-split-button
    • sw-ui-transcript-view
LogoLogoSignalWire Docs
Log inSign up
Support
On this page
  • class: SwUiBackground, sw-ui-background
  • Fields
  • default
  • thumbnail
  • src
  • blurAmount
  • Attributes
  • CSS Parts
Web Components

sw-ui-background

|View as Markdown|Open in Claude|
Was this page helpful?
Edit this page
Previous

sw-ui-call-layout

Next
Built with

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:

  1. A blurred-thumbnail layer driven by a data: URL (small, encoded inline) so something visible paints on first frame.
  2. 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

NameFieldInherited From
defaultdefault
thumbnailthumbnail
srcsrc
blur-amountblurAmount

CSS Parts

NameDescription
thumbThe blurred low-res thumbnail layer (initially visible).
imageThe full-resolution `<img>` layer that fades in once loaded.