How To Change Background Color In WordPress?

Are you trying to figure out how to change background color in WordPress?

It’s EASY.

Creating a visually appealing and engaging website is critical for the success of any online endeavor.

One such aspect that plays a key role in enhancing the aesthetics of your website is its background color.

Whether running a blog or an eCommerce site, the right background color can significantly improve user experience and engagement.

Just imagine how much difference light and dark modes can make for certain pages.

And as a big fan of dark mode, I often miss that feature when browsing numerous websites daily.

This post covers:

• Why change the background color in WordPress?
• How to change the background color in WordPress
  1. Change background color via theme customizer
  2. Change background color via full site editor
  3. Change the background color via custom CSS
  4. Change background color via block editor
  5. Change the background color of a single page (or post)
• Conclusion: Is changing the background really necessary?
• FAQs about changing background color in WordPress

In this guide, we’ll delve into the various methods of changing the background color in WordPress, ensuring your site resonates with your brand and appeals to your target audience.

Why Change The Background Color In WordPress?

Before we proceed to the how-to guide, it’s crucial to understand the significance of changing the background color in WordPress.

The color scheme of your website, especially the background color, plays a VITAL ROLE in creating a strong first impression for your visitors.

It not only influences the look and feel of your website but also affects readability, user engagement, and conversion rates.

For instance, a well-chosen background color can significantly enhance the readability of your content, making it easier for your visitors to interact with it.

My personal preference has always been dark background and light text. It’s much easier for me to read a long text on a dark background. (On the contrary, we’re all so used to light backgrounds, so keeping it that way works for most.)

FORTUNATELY, the trend in the past years is going this way as more and more websites at least have the option to switch to dark mode. (But you can also pick a dark WordPress theme.)

What’s also cool is that you can use different background colors for different posts on your site based on authors, categories, or comments.

This can help differentiate between various types of content on your site, thus improving user navigation and experience.

Furthermore, with WordPress, you can add video backgrounds to grab your visitors’ attention and instantly boost engagement. (The easiest method is with a video background WordPress theme.)

How To Change The Background Color In WordPress

Now that we know why changing the background color can benefit your website let’s explore various ways to change it in WordPress.

1. Change Background Color Via Theme Customizer

One of the most straightforward methods to change the background color in WordPress is by using the built-in theme customizer.

This method is particularly effective for those who prefer a user-friendly approach without the need for coding.

Here’s how you can do it:

1. Log in to your WordPress backend and navigate to Appearance > Customize.
2. This will open the WordPress theme customizer, providing multiple options to modify your WP theme. These include menus, colors, homepage settings, widgets, and more.
3. To change the background color of your website, look for a Colors or Background Color setting in the customizer. Click on it to open the color picker tool.
4. Choose a color for your website background. You can select a color from the palette or enter a Hex color code if you have a specific color.
5. Click Publish to apply the changes once you’ve selected the desired color.
6. Now, visit your website to see the new background color in action.

Please note that not all themes have these options in the customizer.

In most cases, you need to change the background color separately for different website segments (header, footer, home page, etc.).

2. Change Background Color Via Full Site Editor

The Full Site Editor (FSE) is a relatively new feature introduced in WordPress that offers a more comprehensive editing experience.

With the FSE, you can change the background color for your entire site or individual blocks within a page.

1. From your WordPress dashboard, navigate to Appearance > Editor.
2. In the Full Site Editor, you can change the background color of each block. Simply click on a block to select it and then look for a Styles setting in the sidebar.

1. Click on the Colors option and then the Background option under the Color setting to open the color picker tool. Choose a color for your block’s background.
2. After selecting a color, click Save to store your changes.

Repeat these steps for each block you want to change (header, footer, home page).

If you’d like to add a background color that appears behind all the blocks, then you need to add a Cover block.

After you set the background color of the Cover block, you need to add other blocks on top of it.

If you are using Gutenberg, you can run, test, and develop block themes easily and quickly.

Block themes are themes built using templates composed using blocks.

3. Change The Background Color Via Custom CSS

For those who are comfortable with coding, changing the background color through custom CSS can provide more flexibility and control:

1. Go to Appearance > Customize and then navigate to the Additional CSS tab.
2. Here, you can enter the following CSS code to change the background color:

body {
    background-color: #FFFFFF;
}

3. Replace #FFFFFF (color white) with the Hex code of your preferred background color.
4. Once you’ve entered the code, click Publish to save the changes.

There’s one detail that you have to be aware of.

Different themes use different class names for segments of the website. This means the code above won’t necessarily make any difference on your page.

If so, you must determine which classes your WordPress theme uses.

You can find that with the Inspect button in your browser.

Start by right-clicking on the element (in this case, the navigation menu) and then Inspect.

I usually use Google Chrome, which has the most options and is the most user-friendly.

A popup window will open after you click the inspect button.

Now click the Elements button to see the highlighted link displayed with the CSS syntax in the right column.

In the case of our website, the ID of the element we need is body.

I also tried changing the background color to black as per the instructions above, and you can see from the image above that the code worked exactly like it should.

4. Change Background Color Via Block Editor

The WordPress Block Editor, also known as Gutenberg, allows you to change the background color of individual blocks.

This is particularly useful to highlight specific sections or content within your post or page.

Follow these simple steps to achieve that:

1. Open the post or page you want to edit in the Block Editor.
2. Click on the block you want to customize to select it.
3. In the Block settings in the right sidebar, navigate to the Color settings.
4. Here, you can change the block’s background Color using the color picker tool.
5. Once you’ve chosen a color, update or publish your post or page to apply the changes.

5. Change The Background Color Of A Single Page (Or Post)

You might want to change the background color of a specific page or post to differentiate it from others or to highlight certain content.

Here’s how you can do this using custom CSS:

1. Open the post or page you want to customize in a new browser tab.
2. Right-click anywhere on the page and select Inspect to open the browser’s developer tools (as shown above).
3. Look for the post or page ID in the code. It usually looks something like post-123.
4. Copy the post or page ID and then navigate to Appearance > Customize > Additional CSS.
5. Enter the following CSS code, replacing post-123 with your copied post or page ID and ‘#FFFFFF’ with your desired Hex color code:

.post-123 {
    background-color: #FFFFFF;
}

6. Click Publish to save your changes, and then visit your post or page to see the new background color.

I randomly picked a post from the Ultida website, and as you can see in our case, the post ID number is postid-20176.

If I wanted to change the background color of this post to a dark gray, I would use the following code:

.post-123 {


    background-color: #444444;


}

And now this post has a dark gray background.

Simply changing the background color is usually not enough, as your website may (probably will) look weird.

You will also have to adjust the color of the fonts, placeholders, headers, etc.

But that shouldn’t be too hard after learning how to identify the classes you need to adjust.

Conclusion: Is Changing The Background Really Necessary?

From my point of view, changing the background color can enhance the aesthetic appeal of your website, but it’s almost always not enough.

Our examples show that changing the background color from white to black did more harm than good.

We would have to at least change the color of the typography, and even then, it would probably not look perfect.

If you want to change the mode of the website from light to dark or vice versa, I recommend you check my detailed tutorial explaining how to add dark mode to your WP website.

However, there are cases when simply changing only the background color is enough to make a noticeable difference.

If you only need to slightly change the background color (from white to light gray), then the simple methods described in this tutorial are perfect for the job.

And always remember that overdoing it or choosing colors that clash with your content or branding can have the opposite (negative) effect.

Happy coloring!

FAQs About Changing Background Color In WordPress

How do I change the background color of my WordPress site?

You can change the background color by navigating to Appearance > Customize in your WordPress dashboard. Here, look for the “Background Color” setting or similar options under the “Colors” or “Background” section, depending on your theme.

Can I set different background colors for different pages on my WordPress site?

Setting different background colors for individual pages can be achieved if your theme supports custom page templates or through the use of custom CSS. Some page builder plugins also allow you to define unique background colors for specific pages.

Is it possible to use a gradient as the background color in WordPress?

Yes, you can use CSS to create gradient backgrounds. Add the appropriate CSS gradient code to the Custom CSS section in Appearance > Customize. If you’re unfamiliar with CSS, some themes and plugins offer visual tools to set gradient backgrounds.

How do I ensure the background color changes are mobile-friendly?

When changing the background color, the theme generally handles the responsiveness. However, ensure that the text and other elements remain legible on all devices by choosing colors that contrast well and checking the site on mobile devices.

What should I do if my theme does not allow me to change the background color?

If your theme does not offer an option to change the background color through the customizer, you can add custom CSS to achieve this. Go to Appearance > Customize and enter your CSS code into the “Additional CSS” box. Alternatively, consider using a child theme to make more substantial changes without affecting the main theme’s files.