# 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:

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

To modify any block's background color:

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

For most blocks with background capabilities:

  1. Select a block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Find the B. Color property
  5. Click on the Clear

To remove any block's background color:

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Background panel
  5. Find the B. Color property
  6. 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:

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

To modify any block's background color:

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

For most blocks with background capabilities:

  1. Select a block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Find the O. Color property
  5. Click on the Clear

To remove any block's background color:

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Background panel
  5. Find the O. Color property
  6. Click on the Clear

# Background Type

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

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Background panel
  5. Find the Background Type property
  6. Click on the appropriate background type options (image, video)​​
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Background panel
  5. Find the Background Type property
  6. 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.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Background panel
  5. Find the Image URL property
  6. Select an image by Clicking on Browse or copy/paste a URL
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Background panel
  5. Find the Image URL property
  6. 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.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Background panel
  5. Find the Image Source property
  6. Click on the appropriate background type options (static, dynamic)​​
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Background panel
  5. Find the Image Source property
  6. 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.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Background panel
  5. Find the Size property
  6. Click on the appropriate size options (cover, contain, manual)​​
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Background panel
  5. Find the Image URL property
  6. 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.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Background panel
  5. Find the Repeat property
  6. Click on the appropriate repeat options (no-repeat, repeat, repeat-y, repeat-x)​​
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Background panel
  5. Find the Repeat property
  6. 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.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Background panel
  5. Find the Parallax property
  6. Click on the appropriate parallax options (unset, fixed)​​
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Background panel
  5. Find the Parallax property
  6. 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.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Background panel
  5. Find the Blend Mode property
  6. Select the desired option
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Background panel
  5. Find the Blend Mode property
  6. 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.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Background panel
  5. Find the Filters icon
  6. Find the desired property
  7. Enter the desired value
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Background panel
  5. Find the Filters icon
  6. Find the desired property
  7. 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.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Background panel
  5. Find the Video Source property
  6. Select the desired value from the dropdown
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Background panel
  5. Find the Video Source property
  6. 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.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Background panel
  5. Find the Image Placeholder property
  6. Enter the desired URL or Click Browse to select an image from the WordPress media
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Background panel
  5. Find the Image Placeholder property
  6. 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.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Background panel
  5. Find the Video Background Color property
  6. Open the color picker by clicking on the color circle
  7. Select your color in the color picker or click on a global color
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Background panel
  5. Find the Video Background Color property
  6. 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.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Background panel
  5. Find the Cover Area property
  6. Toggle the property

# Background Clip Path

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.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Background panel
  5. Find the Clip Path property
  6. Toggle the property

# Blob

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

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Background panel
  5. Find the Blob property
  6. Toggle the property
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Background panel
  5. Make sure the Blob property is activated
  6. Find the Height property
  7. Enter your desired height
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Background panel
  5. Make sure the Blob property is activated
  6. Find the Randomness property
  7. Enter your desired randomness
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Background panel
  5. Make sure the Blob property is activated
  6. Find the Complexity property
  7. 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.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Background panel
  5. Click on the Quick Styles  icon
  6. 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.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Background panel
  5. Find the Shape Type property
  6. 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.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Background panel
  5. Make sure the Polygon value is selected in the Shape Type property
  6. Find the Points property
  7. Click on the  ​​icon
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Background panel
  5. Make sure the Polygon value is selected in the Shape Type property
  6. Find the Points property
  7. Find the points you want to remove
  8. Click on the  ​​icon
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Background panel
  5. Make sure the Polygon value is selected in the Shape Type property
  6. Find the Points property
  7. Find the point you wish to modify
  8. Find the Left or Top property
  9. Enter the desired value
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Background panel
  5. Make sure the Circle value is selected in the Shape Type property
  6. Find the Points property
  7. Find the property you wish to modify (center, left, top)
  8. Enter the desired value
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Background panel
  5. Make sure the Ellipse value is selected in the Shape Type property
  6. Find the Points property
  7. Find the property you wish to modify (width, height, left, top)
  8. 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.