Single column background management

The Background controls allows to govern the background decoration of Column blocks. To apply a background, you have to select a Background Type first, by clicking on the appropriate control.

Image Background

Image Size

The Image Size control allows for the selection of which image size to load as background for the block. The dropdown displays all of the declared image sizes in the current theme.

Being the Background control a responsive control, you can select different image sizes, or even different source files, for 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.

You can use the marker positioned on the background preview and drag it around, to visually center your image and have the actual values automatically changed.

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.

By default, background images are added as <img> tags in your page. By checking the “Use as CSS background” option, in the Pro version of the plugin, the image will be added as a CSS background on the block element, instead.

Position

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

You can use the marker positioned on the background preview and drag it around, to visually center your video and have the actual values automatically changed.

Size

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

  • Cover: scale the video, 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 video, 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.

Updated