What are Block Backgrounds and Container Backgrounds?

This article will help you understand the difference between the Container Backgrounds and Block Backgrounds, and how to use them in your designs.

Use Block Backgrounds to add backgrounds to any block. This is helpful for designing whole sections.

Use Container Backgrounds to change container styles, and to add a trigger for blocks which have "Parent Hover" styles.

If you’ve played around with some blocks, you might have noticed that some blocks have Container Background settings and Block Background settings. These settings may look similar and may sometimes even behave similarly, but there are some minor differences between the two.

Knowing the difference between Container Backgrounds and Block Backgrounds opens up a lot of design and layout opportunities.

Block Backgrounds

Block Backgrounds are available on almost every Stackable block. Turning on a block’s Block Background option adds a background to the blocks.

This is very helpful for Columns Blocks, since you can easily turn it into an entire section of your page if you change the block widths to wide or full.

You can set the Block Alignment in the block’s toolbar.

Shape separators also jive well with Block Backgrounds. With Block Backgrounds turned on, your Top and Bottom Separators would appear on the edges of your block.

Container Backgrounds

Some Stackable blocks have a Container Background option. You can see this across many of our blocks, such as the Feature Grid block.

Enabling the Container will enclose the contents of the block in a styled container.

To enable the Container, navigate to the Layout tab then toggle on the Container to open up the Container Background settings in the Style tab. This will provide you with background color options or a background image/video option.

Another important function of the Container Background is that it becomes the trigger for blocks which have "Parent Hover" styles.