Sizing & Positioning
Allows you to set the positioning and size of the image background type.
Position
The Background Position property defines the position of the background image.
You can select an image position by using the donut or left/top.
Select/Reset
Select a block.
Open the Block Inspector.
Navigate to the Design Tab.
Open the Background Tab.
Open the Source Tab.
Find Image.
Click to select.
Find the Image URL property.
Select Image by Clicking 🔍 (Browse) or copy/paste a URL.
Select the image position by using the donut or left/top.
Click dot to reset position.
Size
The Background Size property defines the size of the background image and gives you options such as cover, contain, manual.
Options
Cover Fully covers the width and height of the background area without distortion. The background image may be cropped if it is larger.
Contain Adapts to the size of the background area without distortion. There may be blank spaces if a Repeat property is specified.
Manual Adapts to the dimensions specified by the user.
The Background Size property only appears when an image has been selected for the Background Source.
Modify
Select Image.
Open the Block Inspector.
Navigate to the Design Tab.
Open the Background Tab.
Open the Sizing And Positioning Tab.
Click on the appropriate size options (Cover, Contain, Manual).
Repeat
The Background Repeat property allows you to manage the horizontal and vertical repetition of the background image. The repetition of the background image is done relative to its initial position.
The Background Repeat property only appears when an image has been selected for the Background Source.
Options
X The background image does not repeat.
Repeat Default value. The background image repeats horizontally and vertically.
Repeat-Y Only the background image repeats vertically.
Repeat-X The background image only repeats horizontally.
Select
Select an Image.
Open the Block Inspector.
Navigate to the Design Tab.
Open the Background Tab.
Open the Sizing And Positioning Tab.
Find the Repeat property.
Select the appropriate size icon (No-repeat, Repeat, Repeat-y, Repeat-x).
Remove
Select an Image.
Open the Block Inspector.
Navigate to the Design Tab.
Open the Background Tab.
Open the Sizing And Positioning Tab
Find the Repeat property.
Click "X" icon to remove.
Parallax
The Background Parallax property defines how the background image will behave when scrolling the page.
The Background Parallax property only appears when an image has been selected for the Background Source.
Options
Unset The background image moves when scrolling.
Fixed The background image will not scroll with the page, and will remain positioned according to the viewport.
Select
Select an Image.
Open the Block Inspector.
Navigate to the Design Tab.
Open the Background Tab.
Open the Sizing And Positioning Tab.
Find the Parallax property.
Select the appropriate size options (Unset, Fixed).
Last updated
