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.
.
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:
-
Navigate to the Background section.
-
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
-
-
(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).
Some containers offer the option to add a background image slider.
To create a background slider:
-
Navigate to the Background section.
-
Click Image.
-
Click on the + sign and select multiple images rather than a single image from the image picker.
-
Click Done.
-
(Optional) Once the slider is created, you can set slide settings such as slide transition style and slide speed from the row design menu.
-
(Optional) Any of the other background image options such as Background Overlay, Positioning, and display style can be applied to the slider.
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.
-
-
Image Position Type (Editor 2.0 and flex mode only): Select from Default, Static, or Parallax.
-
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. Background image position is set per screen size in Editor 2.0 and flex mode.
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:
-
Have a video ready to upload or a video's shareable URL that is uploaded on YouTube, Vimeo or Dailymotion.
-
Right-click the element you would like to add this background to, then click Edit Design.
-
Navigate to the Background section.
-
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.
-
-
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
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 Media Guidelines and Specifications.
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.