How to change background color in WordPress
Want to change background color in your WordPress website? There are various ways to do that. Here’s everything you need to know about adding or changing background colors in WordPress.
What you’ll learn in this tutorial:
how to change background color in WordPress using Full Site Editing themes
how to change WordPress website background color using classic WordPress themes
how to change background color in WordPress using CSS (works with any theme)
how to change background color only in specific WordPress pages or posts (works with any theme)
Let’s begin with setting background color in Full Site Editing (FSE) themes.
How to change background color in WordPress Full Site Editing themes
Latest default WordPress themes like Twenty Twenty-Three are Full Site Editing themes. Almost any element of the theme can be configured using built-in theme Editor. It allows you to change website background color too.
First click Appearance >> Editor in the admin menu.
Once Full Site Editor opens look at the top right of the page – you’ll find Styles icon. Click it.
Click Colors in the Styles menu.
Now click Background.
Once you’re in Background section you’ll find few options. You can select Solid color, or Gradient.
If you want to use solid color, you can select any color from predefined colors below, or click on color code (FFFFFF in the example) to select any color you want.
WordPress literally lets you select any color you want for background using built-in color picker. Select any color you want, and you’ll see how it looks like live – no need to save and refresh page every time.
If you want to use gradient background in WordPress, it lets you select background from few predefined ones. Or again, you can build any gradient background color you like using built-in color picker.
Just don’t forget to click Save button to save changes if you want the background to be applied to your website.
How to change background color in classic WordPress themes
Lots of WordPress themes have settings in theme Customizer to set background color.
If your WordPress theme has this feature you’ll find it Appearance >> Customize tool. You can also acess the same tool while you’re viewing your site as a visitor – just click Customize link at the top of the page.
Here’s an example from Twenty Twenty-One theme. Click on Colors & Dark Mode tab.
You can select from predefined colors at the bottom of the tab, or select any color you want from color picker.
All the color changes you make will be visible immediatelly. Just don’t forget to save changes to update background color in your WordPress site.
How to change background color using CSS code
Some WordPress theme may not have tools to change background color. And that’s not a big deal actually – it’s not that hard to change background color using CSS code. It works with ANY WordPress theme.
To add CSS code to WordPress you need to open Customizer using Customize link from Appearance >> Customize, or from the top menu while browsing website as a visitor.
On the left side you’ll see Customizer menu. Open Additional CSS tab.
Once you open the tab enter this code to the Additional CSS box:
body {
background-color: pink;
}The result will show up immediately while you’re entering the code.
You may want to choose more specific color for your background instead of main color names. That’s also easy to do – you can replace color name with it’s HEX code.
HEX is 6 symbol code (with # in front) which can represent any color you like. For example, #FF0000 means red, #FFFFFF is white, #000000 is black, and so on. You can get HEX code for any color you want using online color pickers (like / ).
So how do you set background color using HEX code? Easily. Here’s the example from the image above which should be entered to Additional CSS tab:
body {
background-color: #d1e4dd;
}How to change homepage background color in WordPress
Changing only homepage’s background color in WordPress is not complicated at all. All properly built WordPress themes use body classes. Every homepage has a class named home.
So everything you need to do to change only homepage background color is in this example:
body.home {
background-color: #d1e4dd;
}Don’t forget to change color code (d1e4dd) with the HEX color you want.
How to change background color only for specific post or page in WordPress
To change only specific page or post background color in WordPress you need to know couple of easy tricks.
First – you need to know the ID of that specific WordPress page or post. To find out chich page has which ID you need to go to Pages >> All Pages in WordPress admin panel. Try to edit any page you want, ant look at the page link in the browser’s URL. The part which shows ?post=[NUMBER] tells the page ID. In the example you see that page ID is 2.
The same rule applies if you want to know post ID. You just need to open any post (Posts >> All posts), and look for the post ID in the URL.
To set background only for specific page, you’ll need to enter this code to Additional CSS tab (class: page-id-[PAGE ID you found out from the URL]):
body.page-id-2 {
background-color: #d1e4dd;
}Setting background for specific post has a slight difference in the code (class: postid-[POST ID] ):
body.postid-2 {
background-color: #d1e4dd;
}That’s it – now you know how to add custom background color only to specific posts or pages in WordPress.
How to set gradient background color in classic WordPress themes
Setting gradient background colors in classic WordPress themes is as easy as setting a solid color. You just need some help from online CSS gradient generators. For example – cssgradient.io :
You can change the colors as you want, and the tool will generate a custom background gradient code. Everything you need to do is to enter it to WordPress the same way you entered solid colors – using Customize >> Additional CSS:
body {
background: rgb(131,58,180);
background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
}That’s it – your WordPress gradient background is ready!
Post image author – David Pisnoy.
