The Backgrounds panel provides options to add color or attach an image including gradients to a blocks background.Multiple background layers can be stacked and blended to create different effects.
Background Color
Set a color for the blocks background.
Use predefined colors
Most well-designed themes provide a color palette using CSS variables. Use these instead of static hex or RGB values to enable easy global updates and maintain consistency.
Background Layers
The Background feature allows you to add backgrounds to a block. You can add multiple background layers, re-order them and apply background blending.
Adding a background
Go to the block styles Backgrounds > Backgrounds panel and Click the Add New ( + ) button to open the background options panel.
More information on each background type can be found below. Inside the options panel you have the option to complete ( DONE ) or Delete the background.
Editing a background
Hover over an existing background layer to reveal the options to edit and duplicate a background layer.
Re-ordering backgrounds
Use the drag handles to re-order the background layers.
Background + Type
Once you Add a New background you can choose from the following background Types:
- image ( default )
- gradient
- overlay
- none
Select the Background Type and complete the options. We will go into detail for each Type below.
Image background type
The image type provides the following options.
Background Image
set the image to display as a background-image property. This can be:
- an image from the media library
- an external URL
- a CSS Variable eg. the inline background image
inline background image
If the Block Settings > Inline Background has been set then GB will automatically create a Background Image style with the var(--inline-bg-image) CSS variable.
Behind the scenes GenerateBlocks will create the CSS Variable with the chosen image for you. See the Container Block for more information.
Media Size
Available Media sizes
The list of available media sizes that get displayed in the editor is set by WordPress. Plugins and code may register other sizes that are not displayed. To display those you will need to use the image_size_names_choose filter hook.
Select the media attachment size to display. The default options are:
- thumbnail
- medium
- large
- full
Background Position
set the initial position of the background image.
Repeat
Set whether the background image should repeat to fill the space or not.
Value options
repeat
the image is repeated as many times necessary to cover the entire background area. Images may be clipped to fill the space.
no-repeat
the image is n not repeated.
space
the image is repeated as many times possible, without clipping the images, and are evenly distributed.
round
repeated images are distorted to fill the available space so only whole images are displayed.
repeat-x
the same as repeat but only only the x-axis
repeat-y
the same as repeat but only along the y-axis
Size
set the size of the element’s background image.
Value options
contain
scales the image to fit the background area without cropping or distorting the image. If the container is larger than the image, the image will be tiled according to the background-repeat value.
cover
scale the image to fill the container without altering the images aspect ratio . This may result in cropping on either the vertical or horizontal edge(s).
auto
maintain the images original size.
Attachment Type
set whether a background image’s position is fixed within the viewport, or scrolls with its containing block.
Blend Mode
set how the element’s background images and color blend with each other.
Value options
normalmultiplyscreenoverlaydarkenlightencolor-dodgecolor-burnhard-lightsoft-lightdifferenceexclusionhuesaturationcolorluminosity
Gradient background type
Type
set the Gradient type to Linear or Radial
Angle
set the angle of a Linear type gradient.
Colors and Stops
add colors and set the point on the gradient at which the color stops and the next color starts.
Blend Mode
See blend mode above.
Overlay background type
the overlay options is a shortcut method of adding a single color overlay in front of the background.
Overlay Color
Choose a color to overlay the background.
Blend Mode
See blend mode above.
Dynamic Background Images
The Container Block supports Dynamic background images by using a Inline Background Image in the Block Settings panel.
Read here for more information on Container Inline Background images