Using a reasonable background color is really beneficial in helping your content become more eye-catching and readable. For this reason, in today’s tutorial, we will help you change background color in WordPress by using the 3 easiest methods. Now, let’s dive into our blog.
Why should you change the background color in WordPress?
Changing the background color plays a vital role in enhancing your website design as well as helping you boost readability. Although the WordPress theme only offers a default background color, it still provides you with useful options to customize the background color as you wish. In addition, you can use various background colors to make an important section on your website page stand out such as categories, comments, and much more.
How to change background color in WordPress
Method 1: Change background color using WordPress Customizer
This method allows you easily to customize the background color without touching any line of code and you can use the WordPress Theme Customizer instead.
Initially, you need to log in to your WordPress dashboard and then navigate to Appearance > Customize.
From here, you will see available options on the left column to help you easily edit various sections of your themes including menus, homepage, footer, widgets, background image, logo, and much more.
Nevertheless, there is a difference in the placement of options between WordPress themes. It depends on the WordPress Theme that you are using. For example, in today’s guide, we are using the Hestia theme.
In order to change the background color of your site, let’s go down and click on the “Appearance settings” option from the menu on the left.
Then, keep clicking on the “Colors” option to move to the place where you choose your favorite color from the color picker tool.
Next, you need to click on the “Select Color” button below the Background color option and enter your favorite Hex color code in the given space. Alternatively, you can utilize the color picker tool to choose the color you wish to apply to your background.
Once you are happy with your new background color, let’s click on the “Publish” option to save your change.
Now, you can visit your site to enjoy the new background color.
This way is only available for themes that offer colors options. Don’t worry, you can try other methods below.
Method 2: Change background color by adding CSS
WordPress Theme Customizer also comes with an Additional CSS panel that allows you to easily change the background color by adding custom CSS.
Initially, you need to go to Appearance > Customize. Then scroll down the menu and choose the “Additional CSS” tab at the bottom.
Now, you need to enter the code below in the Additional CSS tab.
body {
background-color: #FFFFFF;
}
You should notice that you can replace the hex color code in our example code with another one that you want to display on your website.
Similarly, once you are pleased with the new background color, let’s click on the “Publish” button to finalize the process. Then visit your website to view the result.
Method 3: Change background color for a single page
If you want to change the background color for a particular page, you can follow the steps below.
Step 1: Find your WordPress page ID
First of all, you need to go to Pages > All pages and hover your mouse cursor over the Edit link of the page that you want to change the new background color.
Then, have a look at the bottom of the screen, you will get the link that contains the page ID. The ID will be the number after post=. In our case, the ID is 255.
For more support, you can visit our step-by-step guide on How to Get posts, Categories, Tag, Comments, or User ID in WordPress.
You will utilize this ID for your CSS class to change the background color of the single page.
Alternatively, you can also find the CSS class of any specific page by visiting that page in the front-end. Then, right-click anywhere on it and choose View page source.
Next, press Ctrl+F(or CMD+F on macOS) and use the search bar to find page-id quickly. Let’s note down the page-id-X CSS class, which is usually found in the <body> tag.
In our case, the whole CSS class that we will use is page-id-255.
Step 2: Adding CSS code
Now, you need to go to Appearance > Customizer and then choose Additional CSS and add the following code in the given place.
.page-id-255{background-color: #99E8D0;}
If that doesn’t change, you need to add !important to the CSS code, like this:
.page-id-255{background-color: #99E8D0 !important;}
Remember to change the number 255 with your own page ID. In addition, you can replace the hex color code in our example with your favored hex color code.
When you are done, let’s click on the “Publish” button and go to your page to view a new background color in action.
However, you have to notice that if your site is using a full-width layout, not a boxed one, you will not see the background color, since the main container is covering your content. So, changing the background color only display perfectly on boxed layouts.
Summary
We hope that you will find this blog useful for your website. Moreover, you can get a reasonable solution to handle your problem and then share it with your friends. If you have any queries, let’s drop a comment below. We will support you as soon as possible. By the way, if you are finding a beautiful theme that has a modern design and comes with a list of useful features, don’t ignore a collection of Free WordPress Themes on our website.
- How to place menu items in helix joomla 5 ? - December 14, 2024
- How to reduce the size of helix 2 layout ? - December 14, 2024
- What’s J4 starter template and how to use it - December 3, 2024
Recent Comments