How to Change Background Color in WordPress (Beginner’s Guide)

Want to give your WordPress website a fresh new look without spending hours on complex design changes?

We’ve been creating WordPress websites since 2008. And we can tell you with certainty that changing your site’s background color is one of the fastest ways to transform your website’s appearance.

However, with all the different WordPress themes and editors available, finding the right method can feel overwhelming for beginners.

In this easy-to-follow guide, we’ll show you exactly how to change your WordPress background color, no matter which theme or page builder you’re using.

Why Your WordPress Background Color Really Matters 🎨

Think of your website’s background color as the walls of your digital home. While your WordPress theme comes with a default color, choosing the right background can make a big difference in how welcoming your site feels to visitors.

Here’s why this WordPress design element is so important:

• They make your content easier to read
• They help important information stand out
• They set the mood for your website
• They can make your site look more professional

The right background color can help highlight your important buttons and increase your conversions. You can also use different colors to organize your content better, like using specific colors for different blog categories or special announcements.

And if you want to make your site even more engaging, you can even add video backgrounds to catch your visitors’ attention.

That being said, let’s take a look at how to change the background color in WordPress. We will show you different ways to customize the background color so you can jump ahead to the section you prefer:

How to Change Background Color in WordPress Theme Customizer

Depending on your theme, you may be able to change the background color using the WordPress Theme Customizer. It lets you edit the appearance of your site in real time and without the need to edit code.

To access the WordPress Theme Customizer, you can log in to your website and then go to Appearance » Customize.

This will open the Theme Customizer, where you’ll find multiple options to modify your theme. This includes the menus, colors, homepage, widgets, background image, and more.

The specific options available will depend on which WordPress theme your site is using. For this tutorial, we are using the default Twenty Twenty-One theme.

To change the background color of your website, go ahead and click on the ‘Colors & Dark Mode’ settings tab from the menu on your left.

Next, you’ll need to click the ‘Background Color’ option and choose a color for your website.

You can use the color picker tool or enter a Hex color code for your background.

When you’re done with the changes, don’t forget to click the ‘Publish’ button.

You can now visit your WordPress website to see the new background color in action.

Your theme may not have this option available in the Theme Customizer. In that case, you can try one of the methods below.

How to Change Background Color in Full Site Editor (2024 Method)

The full site editor (FSE) is a WordPress editing platform for editing block themes. This editor makes it super easy to change your site’s background color. Let’s walk through the process together.

Start by going to Appearance » Editor in your WordPress dashboard.

Now, you’ll see a ‘Styles’ button in one of the menu options.

Go ahead and click on it.

Now, click the pencil edit button.

This will bring you to the editing interface.

Now, you’ll notice a handy panel on the right side of your screen. This is your design control center where you can change colors, fonts, and more.

To change your background color, just click ‘Colors’ in the Styles panel.

Next, click ‘Background.’

You can now choose between a solid color or create a gradient. Feel free to pick whatever matches your style. When you’re happy with your choice, hit ‘Save’ and you’re done!

How to Change Background Color in WordPress With CSS

Are you wondering how to change the background color using CSS?

Another way you can change the background color of your WordPress website is by adding custom CSS in the WordPress Theme Customizer.

To start, head over to Appearance » Customize and then go to the ‘Additional CSS’ tab.

Next, you can enter the following code:

body {
 background-color: #FFFFFF;
}

All you have to do is replace the background color code with the color code that you want to use on your website. Next, go ahead and enter the code in the Additional CSS tab.

When you are done, don’t forget to click the ‘Publish’ button. You can now visit your website to view the new background color.

For more details, please refer to our guide on how to easily add custom CSS to your WordPress site.

How to Randomly Change Background Colors in WordPress

Now, are you looking for a way to randomly change the background color in WordPress?

You can add a smooth background color change effect to transition between different background colors automatically. The effect goes through multiple colors until it reaches the final color.

To add the effect, you’ll need to add code to your WordPress website. We’ll walk you through the process below.

The first thing you’ll need to do is find out the CSS class of the area where you’d like to add the smooth background color change effect.

You can do this by using the Inspect tool in your browser. All you have to do is take your mouse to the area you want to change the color and right-click to select the Inspect tool.

After that, you’ll need to write down the CSS class you want to target. For example, in the screenshot above, we want to target the area with a CSS class ‘page-header.’

Next, you need to open a plain text editor on your computer, like a notepad, and create a new file. You’ll have to save the file as ‘wpb-background-tutorial.js’ on your desktop.

Once that’s done, you can add the following code to the JS file you just created:

jQuery(function($){
        $('.page-header').each(function(){
            var $this = $(this),
            colors = ['#ec008c', '#00bcc3', '#5fb26a', '#fc7331'];

            setInterval(function(){
                var color = colors.shift();
                colors.push(color);
                $this.animate({backgroundColor: color}, 2000);
            },4000);
        });
        });

If you study the code, then you’ll notice that we used the ‘page-header’ CSS class as it’s the area we want to target on our website.

You’ll also see that we used four colors using the hex color code. You can add as many colors as you want for your background. All you have to do is enter the color codes in the snippet and separate them using a comma and single quotes, like the other colors.

Now that your JS file is ready, you’ll need to upload it to your WordPress theme’s JS folder using a file transfer protocol (FTP) service.

For this tutorial, we’re using FileZilla. It’s a free FTP client for Windows, Mac, and Linux, and it’s very easy to use.

To start, you’ll need to log in to your website’s FTP server. You can find the login credentials in the email from your hosting provider or in your hosting account’s cPanel dashboard.

After you’re logged in, you’ll see a list of folders and files of your website under the ‘Remote site’ column. Go ahead and navigate to the JS folder in your site’s theme.

If your theme doesn’t have a js folder, then you can create one.

Simply right-click your theme’s folder in the FTP client and click the ‘Create directory’ option.

Next, you’ll need to open the location of your JS file under the ‘Local site’ column.

Then right-click the file and click the ‘Upload’ option to add the file to your theme.

For more details, you can follow our tutorial on how to use FTP to upload files to WordPress.

Next, you’ll need to enter the following code into your theme’s funtions.php file. This code properly loads the JavaScript file and the dependent jQuery script that you need for this code to work:

function wpb_bg_color_scripts() {
wp_enqueue_script( 'wpb-background-tutorial',  get_stylesheet_directory_uri() . '/js/wpb-background-tutorial.js', array( 'jquery-color' ), '1.0.0', true );
 }
add_action( 'wp_enqueue_scripts', 'wpb_bg_color_scripts' );

We recommend using the free WPCode plugin to safely add the code to your site. For more details, see our guide on how to paste snippets from the web into WordPress.

You can now visit your website to see the randomly changing colors in action in the area you targeted.

How to Change Background Color for Individual Posts

You can also change the background color of each individual blog post in WordPress instead of using a single color throughout your website using custom CSS.

It allows you to change the appearance of specific posts and personalize their backgrounds. For example, you can customize the style of each post based on authors or show a different background color for your most commented post.

You can even change the background color for posts in a particular category. For example, news posts can have different background colors compared to tutorials.

The first thing you’ll need to do is find the post ID class in your theme’s CSS. You can do that by viewing any blog post and then right-clicking to use the Inspect tool in your browser.

Here is an example of what it would look like:

<article id="post-104" class="post-104 post type-post status-publish format-standard hentry category-uncategorized">

Once you have your post ID, you can change the background color of an individual post by using the following custom CSS. Just replace the post ID to match your own and the background color code that you want.

.post-104 {
background-color: #D7DEB5;
color:#FFFFFF;
}

To add the custom CSS, you can use the WordPress Theme Customizer. First, make sure that you’re logged in to your WordPress website. Then, visit your blog post and click the ‘Customize’ option at the top.

After that, head over to the Additional CSS tab from the menu on your left.

Next, enter the custom CSS.

Once that’s done, click the ‘Publish’ button.

You can now visit your blog post to see the new background color.

If you want to change the background color based on author, comments, or category, then check out our detailed tutorial on how to style each WordPress post differently.

Bonus Tip: Use a Page Builder for More Design Control

Changing background colors is just the start. If you want to take full control of your website’s design, a page builder can open up so many more possibilities.

We like using SeedProd, the most popular page builder for WordPress, because it lets you:

• Design any page without coding
• Customize colors, layouts, and spacing
• Create professional-looking pages in minutes
• Make your pages look great on all devices

Getting started is easy – just install and activate SeedProd using our simple WordPress plugin installation guide.

Note: You can start with the free version, but SeedProd Pro gives you access to more templates and design options if you need them.

Once the plugin is active, you’ll be asked to enter your license key. You can find the key in your SeedProd account area. After entering the key, click the ‘Verify Key’ button.

Next, you can head over to SeedProd » Pages.

From here, click on the ‘Add New Landing Page’ button.

After that, you’ll need to select a theme for your landing page. SeedProd offers lots of beautiful landing page templates to get started.

You can also use a blank template to start from scratch. However, we suggest using a template as it’s an easier and faster way to create a landing page.

When you select a template, you’ll be asked to enter a Page Name and choose a URL.

After that, simply click the ‘Save and Start Editing the Page’ button.

On the next screen, you’ll see the SeedProd page builder. Here you can use the drag-and-drop builder to add blocks from the menu on your left. You can add a headline, video, image, button, etc.

When you scroll down, there are more blocks under the Advanced section. For example, you can add a countdown timer to create urgency, show social profiles to increase followers, add an option form to collect leads, and more.

Using the drag-and-drop builder, it’s effortless to change the position of each block on your landing page. You can even change the layout, size, color, and font of the text.

To change the background color of your landing page, simply select any section of the page. You’ll now see options in the menu on your left to edit the background style, color, and add an image.

After you’re done editing your landing page, don’t forget to click the ‘Save’ button at the top.

Next, you can head over to the ‘Connect’ tab and integrate the page with different email marketing services. For example, you can connect to Constant Contact, Brevo (formerly Sendinblue), and others.

After that, go ahead and click on the ‘Page Settings’ tab.

Here, you can change the Page Status from Draft to Publish to take your page live.

Other than that, you can also change the SEO settings of the page, view the analytics, add custom code under Scripts, and enter a custom domain.

Once you’re done, you can exit the SeedProd page builder and visit your custom landing page.

Video Tutorial

We hope this article helped you learn how to change the background color in WordPress. You may also want to check out our guide on how to convert Figma to WordPress and our comparison of the best web design software.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.