Home » WordPress » How to change background color in WordPress

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:

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.

how to edit wordpress website colors

Best WordPress hosting 2024

Once Full Site Editor opens look at the top right of the page – you’ll find Styles icon. Click it.

how to change wordpress webste colors in full site editor

Click Colors in the Styles menu.

how to change colors in wordpress

Now click Background.

how to change background in full site editor

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.

background color change in wordpress

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.

how to change background color in wordpress full site editor

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.

how to set gradient color in wordpress full site editor

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.

wordpress where to change background color

Here’s an example from Twenty Twenty-One theme. Click on Colors & Dark Mode tab.

how to change background color in classic wordpress themes

You can select from predefined colors at the bottom of the tab, or select any color you want from color picker.

how to change colors in wordpress

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.

wordpress add css background color

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.

wordpress how to change background color

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 https://htmlcolorcodes.com/ ).

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.

where to find post or page id in wordpress

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 – this one https://cssgradient.io/ :

wordpress how to setup gradient color background

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.

Tags:

Fathom analytics - privacy focused cookie-free website analytics

Most popular tutorials


Get our latest WordPress news and special offers from RockSolidWP!

Only useful WordPress and WooCommerce tips and tricks and exclusive offers for our readers once a month. No marketing nonsense.

Looking for reliable yet affordable WordPress hosting?
Hostinger is the way to go!

Get 10% OFF by using code IMAKEITWORK