Customize the background of site elements to match your business theme with creative designs. Choose background images from the photo gallery, upload your images, use video backgrounds, or apply colors and gradients to add a unique touch to your site.
Note:
Any file (text, image, video, or audio) uploaded to the system is publicly available. Don't upload personal or confidential information. To remove a file completely, delete it from the media manager.
Edit an element background
Follow the steps below to access the design editor and change the background of an element.
Step by step:
Right-click the element, and click Edit Design.
If you are in flex mode or Editor 2.0, select Edit Design from the floating menu to open the design panel.
- Navigate to the Background section.
- Depending on the element, select Color, Image, or Video.
- Select the desired background.
- To create an image slider, select multiple images and click Done.
- Once the slider is created, you can set slide settings such as slide transition style and slide speed from the row design menu.
- Any of the other background image options such as Background Overlay, Positioning, and display style can be applied to the slider.
- Optional: If you select a single image for a background, toggle on Do not optimize this image to prevent optimization.
Configuring background images
After setting up an image or slider, additional configuration options appear. These settings vary, but the most common include:
Image display styles
These options control how an image fits, repeats, or stretches within a container:
- Cover: Stretches the image to cover the entire area. The aspect ratio is maintained, but parts of the image may be cut off.
- Full image: Displays the full image without cutting it off. This may result in bars appearing around the image depending on the container size.
- Tile: Repeats the image at its original size in a pattern to fill the area.
- No repeat: Displays the full image once at its original size.
Positioning and effects
- Image position type: Available in Editor 2.0 and flex mode. Select Default, Static, or Parallax.
- Position: Determines where the image is placed, such as Center, Top, or Bottom. In Editor 2.0 and flex mode, you must set the position for each screen size.
Using video backgrounds
Use video backgrounds to add motion from YouTube, Vimeo, or Dailymotion.
Limitations
- YouTube background videos: YouTube videos display the video title and uploader before the video starts. Because these can't be removed without manual CSS changes, we recommend using other video sources for backgrounds.
- Mobile support: YouTube videos do not auto-play on iOS devices. iPhones in low power mode will show a play button instead of auto-playing any video.
- Audio: Background videos do not play sound. Use the video widget if audio is required.
- Performance: Videos use more bandwidth and can distract users. Use them sparingly and consider reducing the video opacity for a subtle effect.
- Dailymotion playlists: Remove playlist parameters from the URL. Use only the direct video link. For example, use
https://www.dailymotion.com/video/x60ktexinstead of a link containing?playlist=.
Step by step:
- Obtain the YouTube, Vimeo or Dailymotion URL you want to use.
- Right-click the row or column and click Edit Design.
Click the Video tab.
Choose one of the following:
- Click Upload Video to upload a file up to 200MB from your device or cloud storage.
- Paste the video URL into the YouTube, Vimeo or Dailymotion URL textbox.
Troubleshooting
Check if the mobile device is in low power mode, as this prevents auto-play. Browser-specific power-saving settings may also cause this.
Background videos, by default, do not have sound. If your video requires sound, consider using the video widget instead.
This happens when the aspect ratio of the media differs from the container. Because containers change size based on the screen, there is no way to prevent all cropping if the image is set to Cover. To see the entire image, use the Full image option in the background settings.
If the video is added via a link, the privacy settings of the hosting platform (YouTube/Vimeo) might prevent it from being embedded. Test a different public video link to confirm if the issue is specific to those privacy settings.