Your hero section, and section backgrounds in general, can affect how long your audience engages with your site. Content strategy must not only consider things like relevance or load speed, but also quality.
Some sections for your subpage, like grid or text sections, can be customized by using different colors, images or videos as backgrounds. Background images and videos can be loaded from the Media Library or uploaded from your computer.
To add or change section background:
Select the target section in your Site Editor.
On the left navigation pane, scroll down to the Background section.
Select your preferred section background using the following options.
Color - choose a color from the color picker, or input the color Hex Code, or RGBA values.
Image - select an image from the Media Library, or use the Upload Media button to upload an image from your computer.
Video - select a video from the Media Library, or use the Upload Media button to upload a video from your computer.
None - removes the current background, or no background.
Click Done editing section button.
Image Background
If you select an image as a background, you will need to set the following properties:
background-size - will allow you to specify the size of the background image. You can set the image size using one of the four options in the dropdown:
auto - the image is displayed in its original size
cover - scales the image so that the content area is completely covered. (recommended)
contain - scales the image to be as large as possible, but both its width and its height must fit inside the content area.
custom percentage - create your preferred size by percentage (%). For example, 100% will display the entire image.
background-repeat - defines how the background image will be repeated.
no-repeat - image won't repeat in the content area (recommended)
repeat-x - repeat image horizontally until the content area is covered horizontally.
repeat-y - repeat image vertically until the content area is covered vertically.
repeat - image will repeat in the content area until its fully covered
background-position - sets the initial position of the background image. Choose from top, left, right, and center.
Video Background
If you select a video as a background, you will need to set the following properties:
object-fit - specifies how the video should be resized to fit its container.
object-position - sets the initial position of the video.
Note:
Video backgrounds for sections are disabled for mobile site viewing in order to save mobile data.
Unused background-size custom percentages will be removed from the dropdown when Site Editor is refreshed.