How to Add or Remove Background in WordPress Gutenberg Blocks?

Unlike the old Classic Editor, Gutenberg block editor offers various features to customize your content. One of the cool things is that you can easily add background to any block in Gutenberg editor. You can do this without any additional plugin and showcase important portion standing our from other area on the page.

Adding Background to Blocks

There are two possibilities of adding a background to a block:

• Adding a solid color background
• Using gradient colors as background
• Using a background image

We will explain both options in this article.

1. Adding Background Color to Blocks

Let us say, you want to add background color to a paragraph in Gutenberg.

• First insert your text using a paragraph block.
• Click inside the paragraph and then click on the three dots “Options” in the block’s toolbar. Select “Show more settings” option to view the block’s settings in the side.

• Click “Background” option showing under “Color” heading.
• This will open the color palette showing default colors offered by your theme. If you like the default color, click the color to apply it as the background for selected paragraph block.

• For applying a custom color, click on the transparent canvas area showing just above the default color palette. This will open the color picker for you to pick your favorite color.  

• WordPress uses the default color code in HEX format like #FFFFFF. Click on the small arrow showing next to the color code to change the format to HSL or RGB.

You can also copy flat UI or other color codes from other site and simply paste the code in the text box to apply the background.

Applying Gradient Colors as Background

If you want to apply gradient colors, then click on “Gradient” tab. You can either choose linear or radial type and select one of the default gradients.

For custom colors, drag the circles showing on the color box to adjust the focus of the gradients. You can also click on the box and select a color from the picker to add additional gradients to background. For linear type, it is possible to set the angle directly by typing or rotating the angle slider.

Changing Text Color

When you select background color, it is also necessary to change the text color appropriately for clear visibility. If background and text colors are not matching, then WordPress will show you a warning on the sidebar mentioning the color combination may be hard for the people to read.

To fix the issue, click on the “Text” option and set a proper color for your text. For example, you can set white color (#FFFFFF) for the text if you have set black color background.

Grouping Blocks and Add Background to Non-Supported Blocks

If you notice, Gutenberg will support adding background to few blocks like paragraph, list and columns. What about if you want to add a background color to an image? You can add background to any block by using “Group Blocks” option. You can use this for single block (like image) or combine multiple blocks (like image + paragraph). Let us combine a paragraph and an image and add background colors to them.

• First insert the blocks one below other.
• Press shift key and select both the blocks that you want to group.
• Click “Group” option in the block’s toolbar. If required, you can also select “Row” or “Stack” option to arrange the blocks differently within a container.

• Now, you will see the selected blocks are grouped together and the sidebar shows “Color” section. Now, you can change the text and background colors as explained above.

Remember, you can simply ungroup the blocks to remove the text/background colors and reset the block to their initial state.

Removing Background from Blocks

If you are not happy with the background, text or both colors, it is easy to remove them and restore the block to its default state. Click on the three vertical dots showing as “Color options” at the end of “Color” heading in the sidebar.

• Select “Text” to remove the text color.
• Click “Background” to remove the background color or gradient.
• Click “Reset all” to remove both text color and background.

After removing the text or background color, the option will show with a tick mark instead of minus sign. You can use the undo icon showing on top toolbar to revert the changes back.

Using Image Background for Gutenberg Blocks

You can set background image for certain blocks like Cover block in Gutenberg. However, there are no options available to setup image background for most other blocks like paragraph. You need to follow a lengthy process for this.

• Select the block and expand the “Advanced” section on the sidebar.
• Add a custom CSS class in the text box below “Additional CSS Class(es)” heading. Let us add a CSS class with a name as bgimg.

• Click “Save draft” to save your content.
• Go to “Media > Library” and upload the background image. Hover over the image and click “Copy URL to Clipboard” link. Alternatively, click on the image and copy the full file URL on the next screen.

• Paste the image URL in Notepad or TextEdit.
• Copy the below CSS and replace the “image_url_ with your image URL.

.bgimg{
background-image: url("image_url");
padding: 25px;
}

• Navigate to “Appearance > Customize > Additional CSS” section and paste the CSS code in the text box.
• Click “Publish” button to apply the changes.

• Now, go back to your post, click “Preview > Desktop” and select “Preview” in a new tab option.
• The paragraph block should have a background image added to it.

You may need to adjust the text color in Gutenberg editor or add “color:color_code” property to your CSS code to adjust the text visibility on the background image. Similarly, you can adjust the padding and margin to align the paragraph content properly on the image background. You can check the image background tutorial on W3 Schools to learn more on that.

Adding CSS in customizer will be applied to each page on your site. The advantage is that you can simply insert the CSS class to any block on any page to add background image to it. If your theme offers hooks like GeneratePress, Astra or Kadence, then you can create a header hook element to add the CSS only to a specific page. This will be useful to apply the code for single post/page instead of adding globally through customizer.

Final Words

You can add background colors or image to blocks to create attractive call to actions and notifications inside the content without any additional plugins. You can also make the block as a reusable block and insert anywhere you want on the site.