Background Block

The background block does pretty much what it promises to do: Provide a background for nested blocks. You can either set an image, or a color background, or even combine these two with transparency.

Block Options & Demo

Alignment

The background block supports normal, wide and full alignments. It works best in themes, that support full-width blocks, like our AGNCY theme.

Colors

You can freely set the color of the background and text color. With the help of CSS magic, we can even manipulate the colors of blocks, that don’t have own color settings, like the Headings block.

Image Background

You can also set an image as a background and create stunning visuals on your website.

Minimum Height

Sometimes a message is so important, that the section needs a minimum height. The background block allows you to do that.

Parallax Background Image

Of course you can set your background image to be a parallax image.

Transparency

Sometimes putting text directly onto an image is not the best idea. (As seen in the ‘Parallax Background Image’ section.) But you can reduce the transparency of your background block image to enhance readability.

Advanced Layouts

You can freely nest more than one background block into one another and create fancy effects like this. But be warned, the code generated with this might be a bit convoluted and not very SEO friendly.

Go try for yourself, it’s free!

The ‘WP Munich Blocks – Gutenberg Blocks for WordPress’ plugin is free to use and can be downloaded directly in the WordPress backend.