Background Source
Last updated
Last updated
The Background Source property defines the type of background applied to a block, either an image or a video.
Defines the background as an image to ensure the image is displayed properly even at constrained proportions.
Select a block.
Open the Block Inspector.
Navigate to the Design Tab.
Open the Background Tab.
Find the Source Tab.
Find the Type property.
Select the Image icon.
The Background Source property allows you to define the source for the background image, either static or dynamic.
The static Image property means that the selected image relies on manual changes. To select a static image you can Click 🔍 (Browse) or copy/paste a URL.
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 Source.
Select Static.
Select image by clicking 🔍 (Browse) or copy/paste a URL or Click "Set Image".
Select Image and click Select button.
This is how it should look.
Select a block.
Open the Block Inspector.
Navigate to the Design Tab.
Open the Background Tab.
Open the Source Tab.
Find Source.
Click to select.
Find Image.
Click to select.
Find Source.
Select Static.
Find Image URL property.
Click dot to remove.
The Dynamic Image property means that the image can be dynamically set with Wordpress or ACF. It can change depending on different parameters available or set at the time, making it update automatically.
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 Source.
Select dynamic.
The Data property allows you to choose where your Data comes from such as: Unset, Wordpress, ACF.
Unset The Data source has not been set.
Wordpress The Data is coming from a Wordpress source.
ACF The Data is coming from an ACF (advanced customs field) source.
Select a block.
Open the Block Inspector.
Navigate to the Design Tab.
Open the Background Tab.
Open the Source Tab.
Select Image.
Choose Dynamic Source.
Select required Data in dropdown (unset, Wordpress, ACF, WooCommerce).
The Dynamic Data Source is not set. You can input or search for a fallback URL which allows you to have a fallback image rather than an empty space. You can also modify the image position.
Select a block.
Open the Block Inspector.
Navigate to the Design Tab.
Open the background tab.
Open source tab.
Find Image.
Click to select.
Open Source tab.
Choose dynamic.
Find data.
Choose unset in dropdown.
Input or 🔍 (search) fallback URL.
Select Image fallback.
The fallback image will only show on the frontend and only if there is no imput data.
Click dot to reset.
When Dynamic Data Source is set to Wordpress, you can add an image in your Post, such as Featured Image, Author Picture, User Picture.
Select a block.
Open the Block Inspector.
Navigate to the Design tab.
Open the Background tab.
Open Source tab.
Choose Inage.
Set Source to Dynamic.
Set Data to WordPress.
Set WordPress to Featured Image, Author Picture, User Picture as required.
Allows you to add an image that visually represents a post or page on your website as a background image.
Input or 🔍 (search) fallback URL.
Allows you to add an image of the author as a background image to a post or page.
Allows you to add an image of the user as a background image to a post or page.
When Dynamic Data Source is set to ACF, you can add dynamic data to your background image.
You need to have created an ACF group in the Custom Fields in the Dashboard menu.
Select a block.
Open the Block Inspector.
Navigate to the Design tab.
Open the Background tab.
Open Source tab.
Set Type to Image.
Set Source to Dynamic.
Set Data to ACF.
Select required ACF Group in the dropdown.
Add required ACF Field.
Add a Fallback Image as required.
Allows you to add a Featured Image as a background image for your product.
You will need to have already set up a Product Image in the edit product page of the Products tab in the WordPress Dashboard Menu.
Remember to find and select the required product in the Dynamic Preview.
Select a block.
Navigate to the Design tab.
Open the Background tab.
Open the Source tab.
Set Type to Image.
Set Source to Dynamic.
Set Data to WooCommerce.
Set WooCommerce to Featured Image.
You should see the Featured Image appear in the thumbnail.
Allows you to choose a particular Product Image from your WooCommerce gallery as a background image.
You need to have previously created a Product Gallery in the edit product page of the Products tab in the WordPress Dashboard Menu.
Remember to select the required product in the Dynamic Preview.
In the Source tab of the Background tab in the Design tab,
Set Type to Image.
Set Source to dynamic.
Set Data to WooCommerce.
Set W. to Gallery Image.
Set Index to deserved Gallery Image number.
The Background Video Property allows you to add a Background Video to your block.
Select a block.
Open the Block Inspector.
Navigate to the Design tab.
Open the Background tab.
Open the Source tab.
Set Type to Video.
The Source property allows you to select the source of your background video. You can choose between an MP4 link or YouTube.
Select a block.
Open the Block Inspector.
Navigate to the Design tab.
Open the Background tab.
Open the Source tab.
Set Type to Video.
Find Source.
Toggle MP4 link, YouTube.
This allows you to insert an MP4 file as a background image.
Click Search Icon to open the Media Upload panel.
Select required MP4 video.
In the Upload Media window, click "Select File".
Sectle mp4 file and click "Select" button.
The Youtube Background Video property allows you to add a Youtuve Video as a Background Video to your block.
Open the Design tab.
Open the Background tab.
Open the Source tab.
Set Type to Video.
Set Source to YouTube in the dropdown.
Input YouTube video URL.
The video should appear in the editor as a background once the URL has been added.
The Image Placeholder property defines the image that will be used as a placeholder before the video is loaded and played. You enter an URL or browse to select an image from the library.
Select a block.
Open the Block Inspector.
Navigate to the Design Tab.
Open the Background Tab.
Open the Video Tab.
Find the Image Placeholder property.
Enter the desired URL or Click Browse.
Or select an image from the WordPress Media Library.
Click "Select Files".
Select media file and click "Select".
The Background Colour property defines the colour that will be applied to the video container before the video is loaded and played.
Select a block.
Open the Block Inspector.
Navigate to the Design Tab.
Open the Background Tab.
Open the Video Tab.
Find the Background Colour property
Open the Colour Picker.
Select your colour in the colour picker or click on a global colour
Click dot to reset
The Cover Area property defines the size of the background video.
When activated, the background video will fully cover the width and height of the background area without distortion.
When deactivated, the background video will adapt to the size of the background area without distortion.
Select a block.
Open the Block Inspector.
Navigate to the Design Tab.
Open the Background Tab.
Open the Video Tab.
Find the Cover Area property.
Toggle on/off.
The Loop property allows you to play the video in a loop.
It is enabled by default.
Toggle Loop on/off as required.
