How to set image background in WordPress

There are more ways how to add background images in WordPress. From basic to most advanced with theme code changing. However, we are delighted to introduce a user-friendly tool ideal for website administrators without coding and design knowledge. Citadela Pro plugin comes with many features and settings for website customization.

Try the powerful blocks, settings and features in the Citadela Pro plugin. You can explore the perfect tool that allows you to add background images to WordPress pages, posts and custom post types.

The Cluster is a Gutenberg block in WordPress that allows you to add a background image. The multifunctional element enables you to change the background WordPress from its default. You can not only add a background image, and also you can combine it with other blocks. You gain many variations and versatility.

Combined with the Page Title block, you get a fabulous looking website with ease. You can add more Gutenberg blocks and customize the background image in WordPress. Also, you can save a set of blocks like reusable blocks and add a theme anywhere on your website. So you can change the background WordPress website at once.

How to add background image in WordPress using Gutenberg block

WordPress Background Image through Cluster block

We introduce you handy block that we made for WordPress Gutenberg block for background image – Cluster block. It is part of our own blocks group. Citadela Pro plugin has many features to help you create beautiful website. All AitThemes custom blocks are available in Citadela Pro plugin.

Please read Cluster Block documentation for detail settings.

Cluster block allows you to group multiple blocks into one. You can effectively work with the whole clustered group as it was one block. Cluster width can be set to full page width that means you have an extra large space to add various blocks.

Cluster will not stretch to full width if:

• You have an active sidebar
• If you use columns that will limit space for Cluster

Because some of the core WordPress blocks can be aligned only to content width, Cluster block offers greater variability in building your website. Great feature also is, that you can set to WordPress a background image, change its color or set background image overlay. Background can be therefore configured to website design.

In this article we will show you:

• How to add Cluster block to WordPress editor
• Grouping inside Cluster
• Basic settings in toolbar
• Heading and separator color
• How to add background image under grouped blocks
• What is Background overlay
• What’s the difference between Group block and Ait Cluster block

How to add Cluster block

Cluster block is a premium block and is only available if you install and activate Citadela Blocks plugin. After installing the plugin, Cluster block will be automatically added to WordPress block editor and you can immediately start working with it.

Cluster block can be added into both posts and pages. Simply click on “+” sign in top bar or anywhere on editor desktop. After then just search for Cluster block.

Second option to add Cluster block is by typing “/” and block name after that. Cluster block is then ready to use.

Grouping blocks using Cluster

Main feature of Cluster block is to group multiple blocks into one. Let’s have a look how it works. If you insert Cluster block to your page, you’ll immediately see a placeholder “Insert more blocks here”. If you click on it, you’ll get a list of all available blocks. You can also search for requested block using search bar on the top of the list.

All nested blocks will have all default options and settings available. For example if you insert Image block, you’ll have option to upload image or to select it from Media Library.

Using Cluster block you can for example create eye catching section on your website to present your recent work. Add images from your portfolio and after that set background image underneath it. You have just created a nice link to your portfolio.

Cluster block can be also used to create attractive product presentation. You can set product image as section background and choose it’s color. Service block can be also nested inside Cluster block.

Multiple blocks in a single one

If you want to add multiple nested blocks into Cluster, you can use Columns block. Using Column block you can add several blocks side by side. Each column can have different content type, such as image, paragraph, lists or button.

Typical example of multiple columns in combination with Cluster block is one page website.

Basic settings in toolbar: Content alignment options

By default, Cluster block width is set to content size. You can change this behaviour in toolbar. There are the following options available:

• Content size – default option, Cluster block has the same width as content.
• Wide size – content inside Cluster is wider than content width.
• Full width size – in this case Cluster width is from side to side of the browser window.

It’s important to note that this setting will only effect Cluster content if your currently active theme supports it. All nested blocks can be configured based on availability of their options.

Heading and Separator Color Settings

Heading color change

Since WP 5.3 you can switch the color of your header through the Heading block. This is a very useful feature – especially if you have a dark layout and color scheme, it is better to change default text color (which is black) to a lighter color.

It was not possible to change the heading color until new release what caused problems with its visibility on a dark base. Therefore it often happened that the heading blended with WordPress background image or photo you added. Now you can choose right heading color to make your site shine.

New color for Separator used on your website

When you add to your WP a background image or any other type of content, you may sometimes need to separate it from the rest of website. For this purpose you can use special block called Separator. By inserting Separator you can:

• Separate specific blocks
• Split whole text into smaller sections
• Highlight important parts
• Ensure better readability of content
• Simplify navigation on your website

In addition you can now change the Separator line color with the updated WordPress. Colored Separator is perfect for completing your website color scheme.

How to add background image under grouped blocks

True power of Cluster block is that you can add background image and set background color underneath grouped blocks. Everything can be configured easily inside WordPress inspector. Let’s have a look how to do it.

1. Click on Background image and activate function “Show background image”.
2. Click on “Select image”. Media Library will open. You can select existing image or upload new image to your library.
3. Background image can be also set to fixed. It means that if you scroll the page, background won’t move with the content and it’s position will be fixed.
4. You can also choose which part of the background image should be shown using “Focal Point Picker”. It’s also possible to choose part of the image using percentage.

Background overlay

One of advanced options in Cluster is Background image overlay. You can choose one of default colors or select custom color using color picker. It’s also possible to set color opacity. These Cluster block settings help you to create really attractive website presentation.

New Group block available in core

What’s the difference between Group block and AitThemes Cluster block?

Our custom made Cluster block was released earlier than Group block and provides more complex solution. You can use Group block for grouping multiple blocks, but it still has limited functions. For example you are not able to set color overlay in the block – you can only choose basic background color which will be around the image, not over it.

Background image editing is a piece of cake in our Cluster block.

You can upload to your WordPress background image, set background color for it and also background color overlay (and customize overlay opacity too!). It takes only a few minutes.