Merci de votre visite. Cette page est disponible en anglais uniquement.

Background

The Alexa background responsive component (AlexaBackground) displays a video, image, or color behind your content.

Import the alexa-layouts package

To use AlexaBackground, import the alexa-layouts package.

The latest version of the alexa-layouts package is 1.1.0. AlexaBackground was introduced in version 1.1.0.

AlexaBackground Parameters

All parameters except type are optional.

Name Type Default Description Version added

backgroundAlign

String

center

Image/video alignment to apply to background image/video. Defaults to center.

1.1.0

backgroundBlur

Boolean

false

When true, the provided background image is blurred. Applies only when backgroundImageSource is set. Defaults to false.

1.1.0

backgroundColor

Color

None

Color to use as background color. Used when neither backgroundImageSource or backgroundVideoSource are provided.

1.1.0

backgroundImageSource

String

None

URL for the background image source. Used when backgroundVideoSource is not provided.

1.1.0

backgroundScale

String

best-fill

Image or video scaling to apply to background image or video. Defaults to best-fill.

1.1.0

backgroundVideoSource

Video source

None

The background video source. Provide a source in the same format shown for the source property of the Video component

1.1.0

colorOverlay

Boolean

false

When true, a scrim is applied to the background. With images and videos, this can make it easier to read the text displayed over the item. Defaults to false.

1.1.0

overlayGradient

Boolean

false

When true, a gradient is applied to the background.

1.1.0

type

String

None

Always set to AlexaBackground

1.1.0

videoAudioTrack

String

foreground

Audio track to play on when playing the video. Can be foreground | background | none Defaults to foreground.

1.1.0

videoAutoPlay

Boolean

false

When true, the video automatically begins playing when the document is rendered on the device. Applies when backgroundVideoSource is set. Defaults to false.

1.1.0

Background source priority

You can provide more than one background source (video, image, and color). Alexa chooses the background to show based on this priority:

  • backgroundVideoSource
  • backgroundImageSource
  • backgroundColor

If you don't provide a value for any of these, a default background is used.

Position other components relative to the background

To display the background on the full viewport behind your other content, place the AlexaBackground layout first in the first Container and set the Container height and width to 100vh / 100vw.

For example, the following Container contains three items: AlexaBackground, AlexaHeader, and then a Text component. The plain red background fills the entire screen. The header text displays at the top over the background, and the text string displays further down on the screen:

{
  "type": "Container",
  "width": "100%",
  "height": "100%",
  "items": [
    {
      "type": "AlexaBackground",
      "backgroundColor": "red"
    },
    {
      "type": "AlexaHeader",
      "headerBackButton": true,
      "headerBackButtonAccessibilityLabel": "back",
      "headerBackgroundColor": "transparent",
      "headerTitle": "Header title",
      "headerSubtitle": "Header subtitle",
      "headerAttributionText": "Attribution",
      "headerAttributionImage": "https://d2o906d8ln7ui1.cloudfront.net/images/cheeseskillicon.png",
      "headerAttributionPrimacy": true,
      "headerDivider": false
    },
    {
      "type": "Text",
      "textAlign": "center",
      "paddingLeft": "@spacingSmall",
      "paddingTop": "@spacingLarge",
      "paddingRight": "@spacingSmall",
      "text": "This just displays a line of text over the background."
    }
  ]
}

AlexaBackground example

This background displays the specified video. The video starts automatically when the device renders the document and then plays through two times (repeatCount). (This example uses a fictitious backgroundVideoSource. Replace with the URL of the video you want to display).

{
  "type": "AlexaBackground",
  "backgroundVideoSource": [
    {
      "url": "https://example.com/fictitious-video-urls/background-video.mp4",
      "repeatCount": 2
    }
  ],
  "videoAutoPlay": true,
  "videoAudioTrack": "none"
}

This example displays an image instead of a video:

{
  "type": "AlexaBackground",
  "backgroundImageSource": "https://d2o906d8ln7ui1.cloudfront.net/images/MollyforBT7.png",
  "coverOverlay": true
}