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.
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.
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.
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%.
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.
overlayGradient
When using overlayGradient without color, the gradient starts at the bottom and extends upwards.
