Sometimes you may have to change the background of your website by adjusting the color, saturation, and brightness and making the background color compatible with other website colors. Or to use colors to promote some products and services by matching the background with offers and showing purchase buttons. Or even to support your visual identity.
In this article, we will discuss how to change the background color in WordPress, and through three different methods so that you can change the background according to your situation, especially since templates do not come with this feature. Or if you want to change the background color by using a specific addition, you will learn about all of this in the following lines.
Ways to change the background color of your WordPress site
Before you start changing the background color of the website, you should know that there are three ways to do this, which are:
- Use template settings
- Change background through CSS code
- Use an external add-on.
1. Change the website background color from the template settings
One of the simplest ways that you can change the background color is through the customization options in the template, and to be able to go to the control panel in WordPress first, then go to: Appearance << Customize


You have to find the Colors option in the list of template options, and then click on it


Click on the Background Color option, and you will be able to change the site’s background color through the color selector menu, or you can add the color code directly if you want a more customized color or similar to another site’s color.
With an option on the left side that allows you to return to the default color if you change your mind about changing the background of your WordPress site.
After changing the background color, click on the ( Publish) button in the upper part of the window.


2. Change the background through CSS code
Another way to change the background color of a website is by using custom CSS code. This is done by going to the WordPress control panel, and then going to: Appearance << Customize as in the previous step.
After that, go to the (Additional (CSS) formats) option.


Now, you have to copy this code
Paste it into the additional css formats field on your website, and do not forget to change the value ( Green) with the background color code that you want to add to the website. You can use the htmlcolorcodes website to get the exact shade of color you want.
After that, click on the (Publish) button and reload your website to find that the background color has been changed.
3. Change the website background color by using an external plugin
Your template may not contain options for customization, or it may not allow you to modify the color. In this case, you will have to use some external plugins that enable you to do that, and one of them is the SiteOrigin CSS plugin . It is an add-on dedicated to modifying CSS codes, enabling you to change the background color of your website.
Go to the WordPress control panel, click on Plugins and then Add New, search for the SiteOrigin CSS plugin, install it and activate it.


Select the theme option , and click on custom css


Now, you will go directly to the SiteOrigin CSS plugin, just click on the eye icon


After that, you can change the background color by going to the Decoration section and you will find the option to change the background color at the beginning of the list ( Background Color ). Click on it, select the color you want and click on the (✔) icon at the top.
In conclusion, with these methods you can change the background of your WordPress site, and the SiteOrigin CSS add-on gives you many additional options, including attaching images to the background, adjusting the position of the background, as well as controlling its size, degree of transparency, background frame, and other settings related to font colors and display
Leave a Reply