1. The Background tab allows you to configure your website's background appearance on each page with Background Presets. Click the Background tab
Settings Overview
2. The Background Preset consists of two blocks: Edit Background and Background Properties
Edit Background block allows you to create/duplicate/delete a Background Preset and rename the Background Preset
Select an existing Background Preset from the dropdown
3. If you need to create a new Background Preset, click the "+" icon
4. Specify the name for the Background and click Add
5. If you need to duplicate the Background Preset, use the duplicate icon. If you need to delete it, use the bin icon. You can create/duplicate/delete any Background Preset (except the default "Body" background preset)
6. If needed, you can also rename the Background Preset in the Name field
7. The Background Properties block allows you to change the color for the Background Preset and configure a Background Image. Specify the color for the Background Preset. If you need a specific color, use the Color Picker
8. Click "+" to select and add an image from the Media Library as Background Image
9. If you need to change the Background Image, click the pencil icon. If you wish to delete it, click the bin icon
10. Specify the Size of the Background Image in the Background Preset. The following options are available: Original Size, Cover Size, Contain Size
Original Size - the background image is displayed at its natural dimensions (the actual size of the image file).
Cover Size - The background image is scaled to cover the entire container, cropping sides of the image while maintaining its aspect ratio.
Contain Size - The background image is scaled to be fully contained within the container while also preserving its aspect ratio.
Additionally, specify the Position of the Background Image by clicking the arrow or the square icon (center). The arrow icons correspond to the sections of the site: top, middle, and bottom (applicable only to Original and Contain sizes)
By default, the Cover Size for the Background Image for the Background Preset will stretch the image on the entire site, making it distorted. If you want to use Cover Size in this case, select the "Fixed" checkbox so the background image will remain in the same position as the user scrolls down the page. The Cover Size will stretch and fit into the fixed position.
You can use Cover Size for a background image in Row, Container, and Block Widgets. The image, in this case, will stretch to fit the size of content these widgets will have, not an entire website.
11. Select Tile from the dropdown if you need to repeat your background image on the page. The following options are available: Don't repeat, Repeat, Repeat X, Repeat Y
12. Here's how it will look with the Original size and Repeat option. The image will be repeated in a tile pattern across the entire website
13. Here's how it will look with the Original size and Repeat X option. The image will be repeated on the X axis (width), and the Background Color you have specified will be visible
14. Here's how it will look with the Original size and Repeat Y option. The image will be repeated on the Y axis (height), and the Background Color you have specified will be visible on the sides
15. If you need the Background Image to be in a fixed position, select the corresponding checkbox.
The background image will remain in the same position as the user scrolls down the page
Please be advised that this effect will work only on desktop devices.
16. Click the "Save" button to confirm the changes
Applying the new Background
17. Go to the Pages tab
18. Select the page you wish to apply the Background Preset on
19. After selecting the page, switch to the Design tab and scroll to the bottom
20. Select the required Background Style from the dropdown to apply it to the page. You can also quickly switch to editing Background Presets by clicking "My Backgrounds"
21. Click "Save" to confirm the changes
