3 ways to change the background color of your WordPress site

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: 

  1. Use template settings
  2. Change background through CSS code
  3. 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

body {
background-color: green;
}

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

Avatar photo
I am a young man who has been working in WordPress and e-marketing for 10 years. I would like to share my experience with you so that we can become professional in WordPress I will be happy to share the experience with you.