Add an image background fill to an element:

  1. Select a widget
  2. In the Style panel under Fill, upload an image file or paste the URL of an external image

Background Image Scaling

Under the Format panel, you can control the scaling of background images:

  • Auto: Use native size of the image file (no scaling)
  • Cover: Scale the image to completely cover the background area while maintaining the aspect ratio of the image. 
  • Contain: Scale the image to the largest size such that both its width and its height can fit inside the content area
  • Stretch: Stretch the background image to completely cover the background area. 

Background Image Repeat

Under the Format panel, you can control how the background repeats when there is extra space:

  • No repeat: The background-image will not be repeated
  • Repeat across: The background image will be repeated only horizontally
  • Repeat down: The background image will be repeated only vertically
  • Repeat: The background image will be repeated both vertically and horizontally. 

Background Image Alignment

Under the Format panel, you can control starting position of a background image:

  • Left Top
  • Left Center
  • Left Bottom
  • Right Top
  • Right Center
  • Right Bottom
  • Center Top
  • Center Center
  • Center Bottom
Did this answer your question?