Background

The Background Control Group allows you to elevate the look and feel of your designs by allowing you to create visually appealing and engaging backgrounds to appear behind your content.

Controls

There are a variety of controls available for Backgrounds. Please note that some control options may only be available for specific elements.

• Color – Set the background color of the element.
• Type – Choose the type of background. (Image, Gradient, Video*, Slideshow*)
• Overlay – Add an overlay to the background.
  • Color – Set the overlay color.
  • Type – Choose the type of overlay (color, image, gradient).
  • Image – Choose an image for the overlay. (This control is only available when Type is set to image)
  • Image Size – Choose the size of the overlay image. (This control is only available when Type is set to image)
  • Image Settings – Configure settings for the overlay image. (This control is only available when Type is set to image)
    • Size – Choose the size option for the overlay image.
    • Width – Set a custom width for the overlay image. (This control is only available when Size is set to custom)
    • Height – Set a custom height for the overlay image. (This control is only available when Size is set to custom)
    • Repeat – Choose how the overlay image repeats.
    • Position – Set the position of the overlay image.
    • Custom Position – Choose a custom position for the overlay image. (This control is only available when Position is set to custom)
    • Attachment – Choose how the overlay image is attached.
    • Unset Image At – Choose the breakpoint at which the overlay image is unset.
  • Gradient – Choose a gradient for the overlay. (This control is only available when Type is set to gradient)
  • Gradient Animation – Configure gradient animation settings for the overlay. (This control is only available when Type is set to gradient)
    • Scale – Set the scale of the gradient animation.
    • Speed – Set the speed of the gradient animation.
    • Opacity – Adjust the opacity of the overlay.
    • Effects – Add effects to the overlay.
      • Filter – Add filter effects to the overlay.
        • Filter Items – Configure individual filter effects.
          • Type – Choose the type of filter effect.
          • Blur Amount – Set the blur amount. (This control is only available when Type is set to blur)
          • Amount – Set the amount for various effects (brightness, contrast, grayscale, invert, saturate, sepia). (This control is only available for certain filter types)
          • Rotate – Set the rotation for the hue-rotate effect. (This control is only available when Type is set to hue-rotate)
      • Blend Mode – Choose the blend mode for the overlay.
• Transition Duration – Set the duration for transitions.

Image Type Controls

• Image – Select an image for the background.
• Image Size – Choose the size of the background image.
• Lazy Load – Have the background image load lazily.
• Image Settings – Configure settings for the background image.
  • Size – Choose the size option for the background image.
  • Width – Set a custom width for the background image. (This control is only available when Size is set to custom)
  • Height – Set a custom height for the background image. (This control is only available when Size is set to custom)
  • Repeat – Choose how the background image repeats.
  • Position – Set the position of the background image.
  • Custom Position – Choose a custom position for the background image. (This control is only available when Position is set to custom)
  • Attachment – Choose how the background image is attached.
  • Unset Image At – Choose the breakpoint at which the background image is unset.

Gradient Type Controls

• Gradient – Choose a gradient for the background.
• Gradient Animation – Configure gradient animation settings.
  • Scale – Set the scale of the gradient animation.
  • Speed – Set the speed of the gradient animation.

Video Type Controls

• Video – Choose a video for the background.
• Video Settings – Configure settings for the background video.
  • Fallback Image – Choose a fallback image for the video background.
  • Play On Mobile – Toggle video playback on mobile devices.
  • No Loop – Toggle looping of the video.
  • Pause When Out Of View – Toggle pausing the video when it’s out of view.
  • YouTube Privacy Mode – Toggle YouTube privacy mode for the video. (This control is only available for YouTube videos)
  • Start Time – Set the start time for the video.
  • End Time – Set the end time for the video.
  • Zoom – Adjust the zoom level of the video.
  • Offset Y – Set the vertical offset for the video.
  • Offset X – Set the horizontal offset for the video.

Slideshow Type Controls

• Slideshow – Create a slideshow background. (This control is only available when Type is set to slideshow)
  • Add Items – Choose images for the slideshow.
  • Slideshow Settings – Configure slideshow settings. (This control is only available when Type is set to slideshow)
    • Slide Duration – Set the duration of each slide.
    • Transition Effect – Choose the transition effect for slides.
    • Effect Duration – Set the duration of the transition effect.
    • Slide Direction – Choose the direction of slide transitions. (This control is only available when the Transition Effect is set to slide)
    • Ken Burns – Choose the Ken Burns effect for slides. (This control is only available when the Transition Effect is set to fade)
    • Zoom – Set the zoom level for the Ken Burns effect. (This control is only available when Ken Burns is enabled)
    • Origin – Set the origin point for the Ken Burns effect. (This control is only available when Ken Burns is enabled)
    • Play Only Once – Toggle whether the slideshow plays only once.

* – indicates this control is only available for Section elements.