Background options

The controls labeled Background enable the customization of background decoration for blocks. To apply a background, simply choose a Background Type by clicking on the respective control.

Image Background

Image Size

The Image Size control facilitates the choice of the background image size for the block. The dropdown menu presents all the declared image sizes within the current theme.

Since the Background control is responsive, you can opt for various image sizes or even alternate source files based on different Media Queries.

Learn how to define additional image sizes.

Position

With the Background Position control, you can define the background image initial position. The position is expressed as a set of two percentages, compared to the left and top border of the container element.

Utilize the marker located on the background preview to drag and visually center your image. This action automatically adjusts the actual values for precise alignment.

Size

Through the Background Size control you can switch between two different values:

  • Cover: scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.
  • Contain: scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.

Typically, background images are inserted as <img> tags in your page. However, in the Pro version of the plugin, you can opt to use the “Use as CSS background” feature. This choice results in the image being incorporated as a CSS background on the block element instead of using the default <img> tag.

Position

Utilizing the Background Position control allows you to specify the initial position of the background video. This position is indicated by a pair of percentages, relative to the left and top borders of the container element.

Utilize the marker located on the background preview to drag and visually center your image. This action automatically adjusts the actual values for precise alignment.

Size

Through the Background Size control you can switch between two different values:

  • Cover: resize the video to the smallest dimensions that maintain its intrinsic aspect ratio (if applicable) and ensure that both its width and height completely cover the designated background positioning area.
  • Contain: resize the video, preserving its intrinsic aspect ratio (if present), to the maximum size where both its width and height can comfortably fit within the designated background positioning area.

Updated