Layer Background attribute¶

class Background¶

When combining these attributes, the image is tinted with the color.

Hint

If no alpha transparency is included with the specified color, then the color will block out the image.

my-layout.yml¶

layers:
  - background:
      image: images/rainbow.png
      color: "#000000AB"

image : str | None¶

The path to an image used as the card’s background. This path can be absolute or relative to one of the paths specified in social_cards.image_paths.

Missing file extensions

If the image file’s name does not include a file extension (eg .png), then it is assumed to ba a SVG image (.svg is appended to the filename).

By default, this image will be resized to fit within the layer’s size. See preserve_aspect for more details on resizing images.

my-layout.yml¶

layers:
  - background:
      image: images/rainbow.png

color : Color | Linear_Gradient | Radial_Gradient | Conical_Gradient | None¶

The color used as the background fill color. This color will overlay the entire background.image (if specified). So be sure to add transparency (an alpha color value) when using both a background image and color.

Seealso

Please review Choosing a color section for more detail.

my-layout.yml¶

layers:
  - background:
      color: "#4051b5"

preserve_aspect : bool | Literal['width', 'height']¶

If an image is used that doesn’t match the layer’s size, then the image will be resized accordingly. This option can be used to control which horizontal width or vertical height or both (true) constraints are respected. Set this option to false to disable resizing the image. By default, this option is set to true.

If the image has to be resized then it is centered on the layer for which it is used.