Background

The background responsive component is a full screen that can have custom colors, images, or videos behind other elements on the screen. The addition of overlay elements for the background can aid in the legibility of text over the background to make sure your text is at a 4.5:1 contrast ratio to the background of your choice. All of the Background Palette colors are designed for use with white text, any other color will need to be tested to make sure your text is still legible at a 4.5:1 ratio.

Layouts Package

The design recommendations in the guide reference the Layouts Package, which is an additional set of properties that you will need to import to use responsive components in your skill. Check out Alexa Layouts Package for more information.

An example of two hub devices showing the default background dark blue color with no text or other elements on the screen.

How to use the background component

By default, the background is set to dark blue, using the colorBackground setting. You can customize the background to any other color, image, or video that is relevant to your skill. For a list of optimal colors, check out the Background Palette.

Image and Video Instead of a background color, you can add a contextually relevant image or video in the background for your skill. Make sure your image is as big and high resolution as possible. For more information about resolution and sizing, see the Image Sizing Chart.

An example of two hub devices showing a NASA image of Jupiter with no text or other elements on the screen.

Background overlays

When adding text over your background image or video, you may need to add an overlay treatment to improve the readability of the text. If your text color is similar to any part of your background, you'll need to change the color of your scrim to maintain enough contrast for legibility. For example, if you have a dark background and your text is black, you should choose a contrasting color for the scrim between the background and the text to make sure you're at a ratio of 4.5:1.

colorOverlay

This treatment darkens a section that needs contrast without blocking the entire background image. The overlay color is set to #000000 and the opacity is set to 60%.

An example of two hub devices showing a NASA image of Jupiter with a darkened color overlay with no text or other elements on the screen.

backgroundBlur

This treatment is used for busy images that can make text difficult to read. This setting blurs the focus so that it has less influence over the components in the foreground. This is also good for small images that you want to use in the background that might look too uneven due to resolution issues when sizing up.

An example of two hub devices showing a NASA image of Jupiter with a blurred overlay with no text or other elements on the screen.

overlayGradient

When using overlayGradient without color, the gradient starts at the bottom and extends upwards.

An example of two hub devices showing a NASA image of Jupiter with a gradient overlay starting from the bottom going upwards with no text or other elements on the screen.

Additional resources