# Background

The Background properties encapsulate all the different settings that will allow you to define and manage the backgrounds for your block. If you want to add a background color, an overlay, an image background or video background, this is the place to do it.

# Background Color

The Background Color property defines the color of the background of the block.

For most blocks with background capabilities:

Select a block
Open the block inspector
Navigate to the primary tab
Find the B. Color property
Open the color picker by clicking on the color circle
Select your color in the color picker or click on a global color

To modify any block's background color:

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Background panel
Find the B. Color property
Open the color picker by clicking on the color circle
Select your color in the color picker or click on a global color

For most blocks with background capabilities:

Select a block
Open the block inspector
Navigate to the primary tab
Find the B. Color property
Click on the Clear

To remove any block's background color:

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Background panel
Find the B. Color property
Click on the Clear

# Background Overlay

The Background Overlay property defines the color of the overlay that covers the block.

For most blocks with background capabilities:

Select a block
Open the block inspector
Navigate to the primary tab
Find the O. Color property
Open the color picker by clicking on the color circle
Select your color in the color picker or click on a global color

To modify any block's background color:

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Background panel
Find the O. Color property
Open the color picker by clicking on the color circle
Select your color in the color picker or click on a global color

For most blocks with background capabilities:

Select a block
Open the block inspector
Navigate to the primary tab
Find the O. Color property
Click on the Clear

To remove any block's background color:

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Background panel
Find the O. Color property
Click on the Clear

# Background Type

The Background Type property defines the type of background applied to a block.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Background panel
Find the Background Type property
Click on the appropriate background type options (image, video)

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Background panel
Find the Background Type property
Click on selected option to unselect it

Image Defines the background as an image.

Video Defines the background as a video.

# Background Image

The Background Image property allows you to define the image URL that will be used for the background image.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Background panel
Find the Image URL property
Select an image by Clicking on Browse or copy/paste a URL

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Background panel
Find the Image URL property
Remove the URL in the field

# Background Image Source

The Background Image Source property allows you choose whether the image source will be static or dynamic.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Background panel
Find the Image Source property
Click on the appropriate background type options (static, dynamic)

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Background panel
Find the Image Source property
Click on selected option to unselect it

Static A static image source will rely on a static URL provided by the user. It will not update automatically depending on the source, and relies on manual changes.

Dynamic A dynamic image source allows you to specify an image source that might change depending on the different parameters available at the time. It will update automatically. It relies on WordPress dynamic features as well as ACF Pro.

WordPress Data

ACF Pro

Featured Image
Site Logo
Author Profile Picture
User Profile Picture

User set groups & fields
Repeater fields

# Background Size

The Background Size property defines the size of the background image.

The Background Size property only appear when an image has been selected for the Background Type.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Background panel
Find the Size property
Click on the appropriate size options (cover, contain, manual)

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Background panel
Find the Image URL property
Remove the URL in the field

Auto Default value if no other option is selected. The size of the background image remains at its original size.

Cover The size of the background image fully covers the width and height of the background area without distortion. The background image may be cropped if it is larger.

Contain The size of the background image adapts to the size of the background area without distortion. There may be blank spaces if a Repeat property is specified.

Manual The size of the background image adapts to the dimensions specified by the user.

# Background 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 appears when the image option has been selected for the Background Type property.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Background panel
Find the Repeat property
Click on the appropriate repeat options (no-repeat, repeat, repeat-y, repeat-x)

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Background panel
Find the Repeat property
Click on selected option to unselect it

No-repeat The background image is not repeated.

Repeat Default value. The background image repeats horizontally and vertically.

Repeat-Y The background image is only repeated vertically.

Repeat-X The background image is only repeated horizontally.

# Background Parallax

The Background Parallax property defines how the background image will behave when scrolling the page.

The Background Parallax property appears when the image option has been selected for the Background Type property.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Background panel
Find the Parallax property
Click on the appropriate parallax options (unset, fixed)

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Background panel
Find the Parallax property
Click on selected option to unselect it

Unset The background image moves when scrolling.

Fixed The background image will not scroll with the page, and remain positioned according to the viewport.

# Background Blend Mode

The Background Blend Mode property defines how the background image should be merged the background color.

The Background Blend Mode property appears when the image option has been selected for the Background Type property.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Background panel
Find the Blend Mode property
Select the desired option

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Background panel
Find the Blend Mode property
Select the option Inherit

Normal The block does not blend.

Multiply Defines the blend mode to multiply.

Screen Defines the blend mode to screen.

Overlay Defines the blend mode to overlay.

Darken Defines the blend mode to darken.

Lighten Defines the blend mode to lighten.

Color-dodge Defines the blend mode to color-dodge.

Color-burn Defines the blend mode to color-burn.

Hard-light Defines the blend mode to hard-light.

Soft-light Defines the blend mode to soft-light.

Difference Defines the blend mode to difference.

Exclusion Defines the blend mode to exclusion.

Hue Defines the blend mode to hue.

Saturation Defines the blend mode to saturation.

Color Defines the blend mode to color.

Luminosity Defines the blend mode to luminosity.

# Background Filters

The Background Filters property is used to apply filter effects to the background of a block.

This property is still experimental and might not be supported in all browsers.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Background panel
Find the Filters icon
Find the desired property
Enter the desired value

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Background panel
Find the Filters icon
Find the desired property
Click on Reset

To get a complete list and description of the filters available, check the Filters documentation.

getting-started.md

../guides/getting-started.md

# Background Video

The Background Video Source defines the source that will be used for the background video.

Once selected, a field will appear prompting you to enter a URL to an MP4 or YouTube video.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Background panel
Find the Video Source property
Select the desired value from the dropdown

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Background panel
Find the Video Source property
Enter the desired URL or Click Browse to select a video from the WordPress media

# Background Video Image Placeholder

The Image Placeholder property defines the image that will be used as a placeholder before the video is loaded and played.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Background panel
Find the Image Placeholder property
Enter the desired URL or Click Browse to select an image from the WordPress media

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Background panel
Find the Image Placeholder property
Remove the URL from the field

# Background Video Background Color

The Background Color property defines the color 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 advanced tab
Open the Background panel
Find the Video Background Color property
Open the color picker by clicking on the color circle
Select your color in the color picker or click on a global color

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Background panel
Find the Video Background Color property
Click on the Clear button

# Background Video Image Placeholder

The Cover Area property defines the size of the 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 advanced tab
Open the Background panel
Find the Cover Area property
Toggle the property

# Background Clip Path

The Clip Path property is only available in the Div block.

The Clip Path property allows you to give a custom shape a block.

When activated, the selected block will take the shape defined by the user.

Any element inside the block that is outside the selected Clip Path shape will not be visible.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Background panel
Find the Clip Path property
Toggle the property

# Blob

The Blob property allows you to give the clip path a custom shape that is randomly generated.

The Blobproperty accepts 3 different parameters that will change its randomness.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Background panel
Find the Blob property
Toggle the property

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Background panel
Make sure the Blob property is activated
Find the Height property
Enter your desired height

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Background panel
Make sure the Blob property is activated
Find the Randomness property
Enter your desired randomness

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Background panel
Make sure the Blob property is activated
Find the Complexity property
Enter your desired complexity

Height Defines the height of the clip path. We recommend to make it equal to the height of the block.

Randomness Defines how much the blob can be different from a circle.

Complexity Defines the how many points are used to create the path.

# Shapes

The Shapes properties allows you to give the clip path a defined shape that you can further customise.

# Quick Styles

The Quick Styles property allows you to apply pre-made shapes to the clip-path in just a click.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Background panel
Click on the Quick Styles icon
Select the desired shape

# Shape Type

The Shape Type property allows you to define the type of clip-path you want to be applied to the block.

These shapes can be circles, ellipses and polygons.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Background panel
Find the Shape Type property
Select the desired shape type (polygon, circle, ellipse)

Polygon The Polygon value allows you to control multiple sets of x-axis and y-axis values.

Circle The Circle value allows you to define the shape as a circle with its radius and position.

Ellipse The Ellipse value allows you to set a width, height and position to create an oval shape clipping.

# Points

The Points property allows you to define or add values for your custom shapes.

You can only add custom points to a polygon shape.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Background panel
Make sure the Polygon value is selected in the Shape Type property
Find the Points property
Click on the ➕ icon

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Background panel
Make sure the Polygon value is selected in the Shape Type property
Find the Points property
Find the points you want to remove
Click on the ➖ icon

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Background panel
Make sure the Polygon value is selected in the Shape Type property
Find the Points property
Find the point you wish to modify
Find the Left or Top property
Enter the desired value

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Background panel
Make sure the Circle value is selected in the Shape Type property
Find the Points property
Find the property you wish to modify (center, left, top)
Enter the desired value

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Background panel
Make sure the Ellipse value is selected in the Shape Type property
Find the Points property
Find the property you wish to modify (width, height, left, top)
Enter the desired value

Top Defines the distance (in %) the point should be from the top of the block.

Left Defines the distance (in %) the point should be from the left of the block.

Width Applies to the Ellipse value. Defines the width (in %) of the ellipse.

Height Applies to the Ellipse value. Defines the height (in %) of the ellipse.

Center Applies to the Circle value. Defines the radius (in %) of the circle.

background design style