Background Source

The Background Source property defines the type of background applied to a block, either an image or a video.

Background Image

Defines the background as an image to ensure the image is displayed properly even at constrained proportions.

Add

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.

Source

The Background Source property allows you to define the source for the background image, either static or dynamic.

Static

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.

Remove URL

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.

Dynamic

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.

Data

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).

Unset (Data)

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.

Reset Unset

Click dot to reset.

WordPress (Data)

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.

Featured Image

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.

Author Picture

Allows you to add an image of the author as a background image to a post or page.

User Picture

Allows you to add an image of the user as a background image to a post or page.

ACF (Data)

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.

WooCommerce Featured Image

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.

WooCommerce Gallery Background Image

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.

Background Video

The Background Video Property allows you to add a Background Video to your block.

Add

Select a block.
Open the Block Inspector.
Navigate to the Design tab.
Open the Background tab.
Open the Source tab.
Set Type to Video.

Source

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.

MP4 Link

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.

Youtube Background Video.

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.

Image Placeholder

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.