Element Backgrounds

Customize the background of elements to match the theme of your business with eye-catching and creative designs. Choose from custom background images in the photo gallery, upload your own images, use video backgrounds, or apply colors and gradients to add a unique touch to your site.

Note

For page backgrounds, see Theme Background.

Any file (text, image, video, or audio) uploaded to the system is publicly available. No personal and/or confidential information should be uploaded. To remove the file completely, delete the file from the Media Manager.

For details on media guidelines, see Media: Guidelines and Specifications.

Tip

All YouTube background videos display the video title and uploader before the video starts on load. There is no way to remove these items without manually changing the CSS. Due to this change, YouTube videos are not recommended for background video.

To edit the background of elements:

  1. To access the design editor, right-click the element, and click Edit Design.

  2. Navigate to the Background section.

  3. Depending on the element, select Color, Image, or Video and select the desired background.

    • Some elements also have the option for image sliders. To create an image slider, select multiple images then click Done. For detailed information on background sliders, see Background Image Sliders.

    • For details on color options, see Color Picker

  4. (Optional) When selecting an image for a background, click the Do not optimize this image toggle to prevent optimization if a single image is used (this setting will appear after an image has been selected).

Background Image Sliders

Some containers offer the option to add a background image slider.

To create a background slider:

  1. To access the design editor, right-click the element, and click Edit Design.

  2. Navigate to the Background section.

  3. Click Image.

  4. Click on the + sign and select multiple images rather than a single image from the image picker.

  5. Click Done.

  6. (Optional) Once the slider is created, you can set slide settings such as slide transition style and slide speed from the row design menu.

  7. (Optional) Any of the other background image options such as Background Overlay, Positioning, and display style can be applied to the slider.

Background Image Configuration

Once an image or image slider has been setup, additional configuration options will become available.

While the options can vary, the two most common ones are:

  • Image Display Styles: these are the various ways you can control how the image or images are displayed within the container. These options allow you to adjust how an image fits, repeats, or stretches to cover the area. There are four options:

    • Cover: Stretches the image to cover the entire area without losing its aspect ratio (since it's covering the area of the container, parts of the image may be cutoff).

    • Full image: Displays the full image. While the image won't be cutoff, there may be bars that show up on either side or above and below the image, depending on the size of the container.

    • Tile: Repeats the full image at its original size in a tile pattern to fill the area. If the image is larger than the container, it will not repeat.

    • No repeat: Displays the full image at its original size without repeating it. If the image is larger than the container, it will be cut off. If it's smaller than the container, there will be space around the image.

  • Position: This setting determines where the image is placed, such as at the center, top, bottom, left, or right of the container. The position setting works in conjunction with image display options to control how the image is displayed.

    image-display-configuration.png

    Video Backgrounds

    Use Video Backgrounds to quickly add a video from YouTube, Vimeo or Dailymotion. Video backgrounds can catch a visitor's eye with moving content and add a stylish modern look to any site.

    Tip

    All YouTube background videos display the video title and uploader before the video starts on load. There is no way to remove these items without manually changing the CSS. Due to this change, YouTube videos are not recommended for background video.

    To add a video background to a container:

    1. Have a video ready to upload or a video's shareable URL that is uploaded on YouTube, Vimeo or Dailymotion.

    2. Right-click the element you would like to add this background to, then click Edit Design.

    3. Navigate to the Background section.

    4. Click the Video tab. You have the following options:

      • Click Upload Video and select the video you want to upload. You can upload up to 200MB in all formats. You can upload video from your device, Facebook, Instagram, Dropbox, Google Drive or record a video using your webcam.

      • Paste the URL of the video you would like to use into the YouTube, Vimeo or Dailymotion URL textbox.

        Note

        YouTube videos are not supported on mobile as they do not auto-play on iOS devices.

    Considerations

    • YouTube videos are not supported on mobile as they do not auto-play on iOS devices.

    • iPhones with a battery on low power mode will not auto-play videos on a site, and instead will show a play button.

    • Background videos will not play sound.

    • Videos can take time and bandwidth to load, and can distract users from important links or text on your page, so use videos sparingly.

    • Consider adding an overlay with a higher opacity of the video background to make the effect more subtle.

    • When adding a Dailymotion video that is part of a playlist, make sure to only add the direct link to the video (and omit the playlist parameter, which looks something like this:?playlist=x1x2f3). If your video’s URL has this parameter, just remove it. For example: https://www.dailymotion.com/video/x60ktex?playlist=x5x6f2 would be https://www.dailymotion.com/video/x60ktex

    Troubleshooting and FAQs

    The video is not auto playing on mobile

    If you are using an iPhone, the issue could be caused by low power mode. Turning off low power mode might resolve it.

    Another possibility is browser settings.

    The video has no sound

    Background videos, by default, do not have sound. If your video requires sound, consider using the video widget instead.

    Part of my video or image is cut off

    This is due to the aspect ratio of the image or video being different than the container.

    Depending on your goal, this can be challenging to address. If the image or video needs to fit a container that changes based on screen size, there is no perfect solution for preventing it from being cut off. The visible portion of the image or video will vary depending on the screen size.

    If the image does not need to cover the full area, the Full Image option in the image display options can be used (see the section in this article, Background Image Configuration).

    Video backgrounds don't currently have a full video option. Adjusting the original video's aspect ratio may fix it.

    For more information on aspect ratio, see Aspect Ratio vs Resolution.

    The video is not showing up

    If the video is added via a link, the issue could be related to the video’s privacy settings. To check this, try using a different video link. If the new video works, it suggests that the original video's privacy settings are preventing it from displaying on the site.

    The solution will depend on the platform hosting the video, and their support team may be able to assist.