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 and is helpful for designing whole sections.

Use Container Backgrounds to change container styles, and to add a the 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 Background

Some Stackable blocks have a Container Background option, enabling this will enclose the contents of the block in a styled container.

You can see this across many of our blocks, such as the Feature Grid block.

This box / container is what’s being controlled by the Container Backgrounds settings.

Just navigate to the Style tab, and toggle on the Container Background settings. Opening the tab will provide you with background color options or the background image/video option.

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