How to change background color in WordPress websites? [UPDATE 2022]

So you want to change WordPress background colors.

We heard you.

Setting a fine background for the pages of a website is important in web design, because it can enhance a website expressiveness, and better emphasize content.

In this article I’m going to show you how to:

• Change the background color of website sections,
• Add background images,
• Add background videos,
• Use gradients as backgrounds,
• Add overlays to backgrounds.

We’ll be digging inside the Customizer and the Default WordPress Editor. So, let’s roll!

 

Making WordPress background changes inside the theme Customizer

Most popular WordPress themes come with custom background features, that allow you to change the background color, or even use videos, images, gradients as backgrounds.

Yes, the theme will dictate what you can or cannot do in terms of background changes.

If your theme is not rich in features, don’t worry, there’s a plan B: using WordPress plugins. We’ll talk abut this a bit later on this article.

In this exercise I’m going to use two themes to show you how you can make WordPress background color changes, and more: Mesmerize and ColibriWP.

At first I wanted to show you how to do this inside an official WordPress themes, such as Twenty Seventeen, Twenty Twenty, but I said “No”. These are very basic, not rich in features themes, and even changing text can give you a headache. Yeah, that would be an experience I would not recommend. These are not suitable for 2022, when there are all sort of products that allow you to create a website by drag and drop in a single interface.

Now, when you do your own theme research, look for one that is rich in features, that doesn’t have many limitations, even with a free plan. If changing a background can be a pain in the ass, just skip it.

 

First, let me show you how to install any WordPress theme.

1. From the WordPress Dashboard, head over to Appearance – > Themes.
2. Go to “Add new”.
3. Type the name of a theme in the Search bar.
4. When you find the theme, click on “Install”.
5. Click on “Activate”.
6. Click on “Customize” to enter the theme’s Customizer.

 

How to change WordPress background color in the theme’s Customizer using Mesmerize theme

I chose Mesmerize to show how you can change the background of WordPress sites because this theme has comprehensive features for changing background colors, images, gradients, so it seemed a good example to start from.

After going inside the Mesmerize Customizer you will notice a message saying: “Please Install the Mesmerize Companion Plugin to Enable All the Theme Features”. This means that in order to benefit of some extra features, Mesmerize will install a plugin for you that will enrich the Customizer. Most of the themes out there will proceed similarly. Because the basic WordPress Customizer has tons of limits.

So, I’m going to activate the plugin, which is called Mesmerize Companion.

Let’s start playing with some backgrounds, shall we?

 

Making WordPress background color changes to sections

Each page section inside Mesmerize has a settings icon in the upper-right. Let’s click on such an icon.

Notice the “Change background” option?

Let’s select it and see what happens.

 

A window will show up on the left-hand side. Let’s go to “Background color” and click on the dropdown.

You can either select a color from the theme’s palette, use the slider to pick a color, or paste the code of the color you want.

You can use the slider shown below to adjust the opacity of the background color. You can decide on having a more transparent color or an opaquer one.

Click on “Choose” when you’re done. Then save your page to go live with the background color change.

I’m gonna go with a white background for my section, because I do love minimalist design and white space.

 

Working with background images and overlays

While we’re still making changes to our section background, let’s switch the background type from color to image.

Click on “Change” to head over to the Media Library and add an image, or upload one from your device.

Click on the image, then click on “Select” in the bottom right.

Here’s how the background looks like at the moment.

I will need to add an overlay so that the plant image won’t be so “in your face”. An overlay is a semi-transparent color that is applied on top of the background, to obtain a nice visual effect. It can give an elegant, stylish look to the web page, and it can make a difference between a common design and a classy one. If you don’t want an overlay, you simply leave the option set to default (that is 100% transparency of the overlay, or no overlay activated for the page/page section).

Let’s go to background overlay and darken it a little.

Here’s the result:

Now, the font-color will need to be changed in order to have a proper contrast. But this is another story.

 

Working with background gradients

What if we go for a gradient instead of an image?

There are several gradients available inside Mesmerize. Let’s click on “Choose gradient” to discover them.

 

How to change WordPress background color in the theme’s Customizer using the Colibri theme

I wanted to show you two themes that manage to level up the Customizer. Colibri is newer than Mesmerize, and during the activation it recommends you to install the Colibri page builder. The page builder will actually put the Customizer on steroids, giving you a lot of design freedom.

 

Making WordPress background color changes to sections

Each page section inside Colibri has a settings icon in the upper-right. Let’s click on such an icon.

You will notice an editing panel on the left, that will allow you to make all sorts of styling changes. This panel has more advanced options than Mesmerize. It is structured like this: Layout/Content, Style, and Advanced. Background changes can be made inside Style and Advanced.

Go to Background – Color and click on the colored rectangle.

This will pop up a window with several color options:

• A list of colors from the current theme color scheme. You can pick a color from here, or even change the color scheme by going to “More schemes”,
• A slider that helps you pick the color you like,
• Fields where you can input your own HEX or RGB color codes.
• Slider to set up the color opacity. Opacity has values from 0 to 1, 1 meaning totally opaque. In the field that has an “A” underneath you can input a value for the opacity if you want.

In the example above, the opacity is set to 0.51. The value is also reflected inside the opacity slider.

When you’re done, just hit “Save”.

I have chosen an orange shade from the color scheme, then set the opacity to 0.45.

 

Working with background images and overlays

Let’s see how we can add a background image to a section, what do you say?

Did you notice that below the color option you can change the background type to image?

Let’s click on the default background image in order to change it. You will be taken to the Media Library to choose an image, or upload one.

Here’s the result:

 

Working with background gradients

Let’s switch now from the background image type to gradient.

If you click on the gradient you’ll see several ones available, both in Colibri free and PRO.

Now, you can decide whether the attachments should be fixed or scroll. I like it scroll, because it make me think of a parallax effect.

 

Overlays and parallax effect in Colibri

Now, with Colibri PRO you can toggle on the overlay and parallax options. I really love the parallax effect. It adds a twist to the page design.

Now, let’s toggle the overlay on.

Here you can:

• Choose the color of the background overlay,
• Adjust the opacity of the overlay. The scale is from 0 to 1.
• Choose a shape overlay,
• Change the overlay type. You can go with color, gradient, or shape only.

 

Working with video backgrounds

In Colibri PRO you can also add a video as a background. The process is the same as for background images. Remember, we’re still at the section level.

But we can change the background for a column as well. When you select a column you will recognize the same panel on the left. Let’s go to Style – Background – Background type and select video.

If you click o the default video, you will be able to go to the Media Library and pick another video, or upload one.

Don’t forget to save your changes!

 

Now, the Colibri theme together with the Colibri page builder are a great combo that you can use to build or sort of pages. They give you space to be creative and the tools to make a remarkable site.

But, if you’re using another theme, that has limitations when it comes to customizing backgrounds, you can overcome them using a plugin.

 

How to customize backgrounds using the Advanced WordPress Backgrounds plugin

This plugin is easy to use, and it comes packed with several background types, such as color, image, self hosted video, Youtube, and Vimeo.

It allows you to beautify your backgrounds with overlays an parallax effect as well.

It integrates well with Gutenberg as well, which is a plus.

Let’s install the AWB plugin.

• From the WordPress dashboard, go to Plugins -> Add New.
• Enter “AWB” as a keyword to find the plugin.
• Click on the “Install Now” button, then on “Activate”.

Now, let’s open a page, and find out how to add a background using the plugin.

• In the Classic Editor, go to the AWB icon from the toolbar.

• A popup will show up. Let’s configure it.
• Let’s select the background color type.
• Let’s pick a color by using the slider or by pasting an RGB color code.

You can set up margins and paddings for the background inside the “Styles” option.If you choose the image background type, you can enable the parallax option as well.

If you’re using the Default Editor, this plugin will install a dedicated block that you can use. But I won’t go further into these details, because I have another recommendation for you when it comes to the Gutenberg Editor.

 

For those of you that work in the latest WordPress experience, aka with blocks, here’s how you can make background changes.

 

Making WordPress background changes inside the Default Block Editor (Gutenberg)

Hate to break this to you, but inside the Default Editor you can’t do much styling. Everything is pretty basic. but, if you’re looking for a solution that gives more control over design in the block Editor, there’s an option at the end of this chapter. Stay tuned!

 

How to make WordPress background color changes for blocks

Now, the following blocks allow you to change the text and the background color:

• Paragraph
• Heading
• Button
• Cover
• Group
• Table
• Media & Text

I’m going to use the heading as our example. Let’s add one to a page.

1. Go to the canvas to the place where you want to insert the block. Hover between the existing blocks until you see a “+” sign. Click on the sign.
2. A block inserter will open now. Type “heading” to find the heading block, then select the block.
3. The inserted block looks like this.
4. Start typing the text for the heading.
5. Head over to the block editing panel on the right and go to “Color”.
6. Click on the tiny rectangle next to “Background”.
7. Pick a color.

And you’re done. You can repeat the flow for the rest of the blocks that allow backgrounds.

Some blocks also allow you to add gradients as a background (eg: the buttons block).

How to make WordPress background color changes for patterns

Now, let’s say you want to add a pattern to a page and then want to change its background color. How do you proceed? It’s as straight forward as above.

Patterns are predefined block layouts, available from the patterns tab of the block inserter. Now, I showed you above how to open up the block inserter by hovering between the block on a page. There’s a second method.

Look for the “+” sign in the upper-left, next to the WordPress logo.

It will open a block inserter that has a list of blocks and a list of patterns. Let’s go to “Patterns”. there are several categories that you can choose from: headers, footers, gallery, etc.

You can:

• click on a pattern to add it to the end of a page,
• drag a pattern and drop it wherever you want on the canvas.

I added a call to action.

Let’s change its background color.

Start by selecting the pattern.

The current call to action pattern is actually a group of blocks, containing:

• A paragraph – “Get in touch”,
• A heading – “Schedule a Visit”,
• A button – “Contact us”.

This is why when you look at the block editing panel on the right, you’ notice that you’re making edits to “Group”.

Now, go to Color -> Background to open up the color picker I showed you a bit earlier. You can pick a solid background color or a gradient.

 

I’m choosing one of the gradients. There’s a slider that I can use to adjust the luminosity of the gradient. I can also choose between the linear and radial types of backgrounds, as well as the angle for it. Here’s the result:

Don’t forget to save your design!

 

Now, I promised you that I have a better solution for you when it comes to have more control over design in the Default Editor.

Introducing Kubio: the only block-based solution that you need when working in Gutenberg.

Kubio is a website builder than works on top of Gutenberg.  It actually levels up the Block Editor, enriching it with functionalities that will end up giving you complete freedom over website design.

Kubio is compatible with all WordPress themes, but, at the end of the day, because of its flexibility, the theme won’t even matter.

Now, let’s see how you can work with Kubio and customize backgrounds.

 

Customizing WordPress Backgrounds Using Kubio (the Free Block-based Page Builder)

Inside the WordPress editor, there are some already existing blocks. You can use them from any page or post level. Kubio will add some extra Gutenberg blocks in the blocks panel. If you go to the “+” sign in the upper-left corner, you’ll see the block inserter. The default WordPress blocks have black icons, while the Kubio ones have blue & green icons. The Kubio blocks are shown first.

The moment you add any block, you will notice a block editing panel on the right-hand side, with three layers: Layout/Content, Style, and Advanced.

Background changes happen inside “Style” and “Advanced” for most of the blocks you want to use.

Now, we need to go to a page and edit it. The moment you install Kubio builder, when you hover over a page inside “All pages” you will see “Edit with  Kubio” written beneath. click on it to enter the Editor to customize the page.

Now I’m adding a section with two column to the page.

I use the “Add blank section button” at the bottom of the page, and select a two-column layout.

From the “+” signs I’m adding a heading block and a buttons block.

Now, here’s a re the steps for making background color changes for a section or block.

• Let’s start by changing the background for the whole section.  After selectin the section, let’s head over to the block editing panel on the right. Next, let’s go to Style -> Background -> Background color.

• Select the colored circle next to your option. A panel will open up that allows you to pick a color from the current color scheme or gradient from a color, pick a color from a slider, or just type in a desired color code in the “HEX” field. You can also switch to the RGB color mode if it suits you better from the dropdown arrow.

  You can also adjust the opacity of your color. The slider offers you values from 0 to 1, 1, meaning there’s no transparency. You can always reset the color to transparent when you select the reset button.

I chose a blue shade, with an opacity of 0.4.

 

The Kubio free plan allows you to use two background types: images and gradients. Inside the PRO plan you can also use video and slideshow as background.

Inside the PRO plans you can also use overlays and the parallax effect.

 

Now, did you notice that the options inside Kubio are a true upgrade to the Default Editor features?

If you are new to WordPress, Kubio can be the builder that you need, in order to create a stunning website, by drag and drop, while having complete design freedom. You can even choose between a free and paid plans.

 

Wrap up

This was a long one, I know.

Here’s what you’ve learned so far:

• How to make WordPress background changes inside the theme Customizer. We used two themes as examples. We discussed background colors, images, gradients, and more,
• How to work with the Advanced WordPress Backgrounds plugin
• How to customize backgrounds in the Default WordPress Editor,
• How to customize backgrounds using Kubio, a flexible and free block-based page builder that puts the Default Editor on steroids.

 

[sibwp_form id=1]