tomasg.lt

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:

Making any of these changes usually takes just a few seconds, and you don’t need to install any additional plugins to do it. The changes are also non-destructive – you can easily apply them without risk of breaking your website.

How to change background color in WordPress for all pages and posts

To set a background color for all your WordPress website you need to open Customize page.

There are multiple ways to ge to the Customize page. For example you can go to Appearance >> Customize using WordPress admin panel. Or you can login to WordPress panel, and then get back to the frontend of the website. Customize button will show up at the top of any page or post.

wordpress customize posts and pagesOn the left side you’ll see Customizer menu. Open Additional CSS tab.

wordpress add css codeOnce 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 change background color using css codeYou 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/ ).

Most of WordPress themes have color pickers built-in. For example default WordPress theme Twenty Twenty-One has color picker in Customize > Color and & Dark mode tab.

wordpress color pickerDefault WordPress theme also has a dedicated setting for background color, but not all WordPress themes have this option.

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;
}

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.

how to find page id in wordpressThe 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 WordPress

Setting gradient background colors in WordPress 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/ :

online css gradient generatorYou 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!