Do you want to change the background color in WordPress and look for an easy way to do it? If YES, you’re certainly in the right post.
For any website design and branding, the background color plays a vital role without any doubt. The background color will make your content eye-catching, which results in readability.
In this entire article, you’ll be with us to know how you can change the background color in WordPress RIGHT AWAY.
Table of Contents
Normally, each WordPress theme has a default background color. And you can change the background color as you want to personalize the design and increase the readability score of your WordPress site.
For example, you may use a distinct background color to highlight a certain area of a website. This assists in emphasizing your call to action (CTA) and increasing conversions.
On your WordPress blog, you may use various background colors for different posts based on authors, comments, or categories. This distinguishes articles from other information on your website.
There is also a way to add video backdrops to attract your visitors’ attention and increase interaction.
That stated, let’s look at how to change the background color in WordPress. We’ll explain to you how you can change the background color in WordPress using a number of ways.
Using WordPress Theme Customizer, you can easily change the background color in WordPress. However, it’ll totally depend on the theme that you’re using right now. It allows you to change the look of your site in real-time without having to update code.
To do so, sign in to your WordPress website and navigate to Appearance > Customize to use the WordPress Theme Customizer.
This will launch the Theme Customizer, where you may make changes to your theme. This includes menus, the homepage, colors, the background picture, widgets, and other elements.
The particular choices accessible will be determined by the WordPress theme that is being used on your site. We’re going to use the default Twenty Twenty-One theme for this lesson.
Well, now head towards the WordPress menu on your left and click on the ‘Color & Dark Mode‘ settings tab from there to change the background color of your website.
Then, select a color for your website by clicking the ‘Background Color‘ option. Besides, for your backdrop, you may use either the color picker tool or input a Hex color code.
Remember to press the ‘Publish‘ button when you’re finished making changes. Well, you may now see the new background color in action by visiting your website.
Please note that this feature may not be accessible in the Theme Customizer for your theme. In such a case, try one of the methods listed below.
Here is a question, are you seeking a technique to change the background color in WordPress at random?
You may use a seamless background color change effect for a smooth transition between multiple backdrop colors. However, the effect cycles through several colors before arriving at the final color.
Moreover, you’ll need to do a few easy coding to your WordPress website to enable the effect. No worries, we’ll lead you through each step below.
The first step is to determine the CSS class of the area where you want to apply the seamless background color-changing effect.
You may achieve this by running your browser’s Inspect tool. To do so, simply move your cursor to the area you wish to change the color of and then right-click to pick the Inspect tool.
Following that, type out the CSS class you wish to target. For example, in the picture above, we wish to select the section with the CSS class ‘page-header.’
Next, open a simple text editor on your desktop, such as notepad, and create a new file. You must save the file on your computer as ‘wpb-background-tutorial.js.’
After that, you may add the following script to the newly formed JS file:
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 look at the code, you’ll note that we applied the ‘page-header’ CSS class to target the location on our site.
Additionally, you’ll also see that we applied four different colors by using the hex color code. Now you can make your background as colorful as you wish. To do so, simply insert the color codes in the sample and separate them with a comma and single quotes, just like the other colors.
However, once your JS file is complete, use a file transfer protocol (FTP) service to upload it to your WordPress theme’s JS folder.
We’ll be utilizing FileZilla here. It’s a free FTP client for Windows, Mac, and Linux that’s extremely simple to use.
To begin, you must connect to your website’s FTP server. You can get the login credentials either in the email from your host provider or from the hosting account’s cPanel dashboard.
After you log in, you’ll see a list of your website’s folders and files in the ‘Remote site’ column. Now, navigate to the JS folder in the theme of your website.
What if you don’t have a js folder? No worries, you can easily build one. To do so, simply right-click the theme’s folder in the FTP client and select ‘Create directory.’
Then, under the ‘Local site’ column, navigate to the location of your JS file. Then, right-click the file and select ‘Upload’ to add it to your theme.
Afterward, in your theme’s functions.php file, paste the following code. This code loads the JavaScript file and the dependent jQuery script that is required for this code to function correctly.
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' );
However, to securely add the code to your site, we recommend utilizing the Code Snippets plugin. Well, everything is set up; now, you can view the randomly changing colors on your website in your chosen place.
To change the background color in WordPress, you can go with another method. That is, adding a custom CSS in the WordPress Theme Customizer.
To begin, navigate to Appearance > Customize and then to the ‘Additional CSS‘ option.
After that, input the following code:
body {
background-color: #FFFFFF;
}
Now, simply change the background color code with the code you wish to have on your site. Next, paste the code into the Additional CSS tab.
When you’re finished, don’t forget to hit the ‘Publish‘ button. Well, to view the background color, go to your website and see the changes.
To get more information, you can see our guide on how you can apply custom CSS to your WordPress site.
You may also use custom CSS to change the background color of every individual blog post in WordPress rather than utilizing a specific color throughout your site.
It makes it easy to customize the style and backgrounds of certain posts. You may, for example, change the layout of each post based on the author or display a variety of backgrounds color for your most talked article.
You may also customize the background color of articles in a certain category. For example, newspaper articles and demonstrations of anything may have distinct background colors.
However, the first step is to locate the post ID class in your theme’s CSS. You may do this by browsing any blog post and then right-clicking to utilize your browser’s Inspect tool.
Here’s an example of how it may look:
<article id="post-104" class="post-104 post type-post status-publish format-standard hentry category-uncategorized">
Once you have your post ID, you may use the following custom CSS to change the background color of a specific post. To do so, you need to simply change the post ID and its background color code to match your preferences.
.post-104 {
background-color: #D7DEB5;
color:#FFFFFF;
}
Plus, you may utilize the WordPress Theme Customizer to apply custom CSS. To begin, ensure that you are signed in to your WordPress website. Then, return to your blog post and select the ‘Customize‘ option at the top.
Then, from the menu on the left, select the Additional CSS option.
After that, add the modified CSS and press the ‘Publish‘ button.
You may now see the changed background color on your blog post.
Using videos as the background of your WordPress website is an excellent approach to attract your visitors’ interest and enhance conversion rates.
Having said that, using a WordPress plugin is the simplest approach to putting a video in the background. For background images in this tutorial, we’ll utilize mb.YTPlayer.
It’s a free plugin that allows YouTube videos to play in the background of your WordPress site. Besides, there is also a premium version available that removes the mb.YTPlayer watermark and provides additional customization options.
You must first install and activate the plugin on your site. For additional information, see our guide on how to install a WordPress plugin.
After activation, navigate to mb.ideas > YTPlayer from your WordPress dashboard.
On the next page, enter the URL of your YouTube video and enable the background video.
Aside from that, the plugin allows you to choose where your background video will be shown. You can use a static homepage, a blog index homepage, or both. If you pick ‘All,’ you may also show the video across your whole site.
Visit your site once you’ve input the video URL and enabled the background to see the video background in operation.
A successful design may depend on choosing the right background. The background can tell a lot about the personality of the site. On the translation website Smartlation.com, for instance, a video background depicts people from different countries to demonstrate the diversity of translators.
When presenting your content on your site, you should consider the color of your background, especially if you want your visitors to be able to read it. The contrast between the content and the background is crucial, especially for disabled visitors.
When you think that your website may contain content that your users will find helpful, you should consider allowing them to print it. It is not advisable to print on colored backgrounds even though there are workarounds to discriminate between the colors.
You can change the WordPress background color at any level, as you can see. Just follow the steps above to change the color.
The fact remains that, despite being a simple task, WordPress web developers need to possess this knowledge.
Themes that contain custom menus in which to change the background should be taken into consideration; these menus can often be found in the dashboard menu or on the customization page.
You may also look our guide on how you can regenerate permalinks in WordPress. You may also want to see our guide on how you can add special characters in WordPress posts.
If the plugin you are using in this tutorial is not working for you, you may try another. If this tutorial was helpful, please share it.
The following article explains how to adjust the background color in WordPress. Thank you for reading it. For more WordPress tutorials, please follow us on Facebook and Twitter.
