Here’s another quick and easy tutorial in which I’ll show you how to change the background color of a single page in WordPress.
We won’t use a plugin, just some simple CSS code.
Let’s jump right into it!
Step 1 – Finding Your Page ID
First, you’ll need to find your WordPress page ID.
Go to Pages > All Pages and hover your mouse cursor over the Edit link of the page.
Then, at the bottom of your browser, a link will appear. Note down the ID from that link.
The ID will be the number after post=
. In my case, it’s 2.

You’ll use this ID for your CSS class that is needed to change the background color of the single page.
Alternative
You can also find the CSS class of that specific page by:
- Visiting the page in the front-end;
- Right-clicking anywhere on it and selecting View page source;
- Pressing CTRL-F (CMD-F on macOS) and searching for
page-id
to quickly find it; - Copying the
page-id-X
CSS class, which is normally found in the<body>
tag.

As you can see, Chrome highlighted what I was searching for, which is page-id
, so I found it right away.
Now, you’ll have to copy the number from the class as well, not just page-id
!
In my example, the whole CSS class that I’ll be using is page-id-2
.
Step 2 – Adding the CSS Code that Will Change the Single Page’s Background Color
Add the following CSS code in WordPress:
.page-id-2 {background-color: #99E8D0;}

Here are different methods to add CSS to your WordPress site.
Change the number 2 with your own page ID!
If you used the alternative method pointed out above, you just need to copy the class that you find in your source code, which will automatically contain the correct ID for that specific WordPress page.
If you got the page ID separately, using the first method, replace the one in the code with it.
So, for example, if your page ID is 479, then the code will look like this:
.page-id-479 {background-color: #99E8D0;}
You can also change the background color by changing the hex color code, which is #99E8D0
.
This produces a… teal color? :) I’m not so good with colors.

You can use this tool to pick a color and generate the hex code for it.
So, now, you’ll have a different background color for that single WordPress page!
If the Background Color Doesn’t Change
a) Clear your site and browser (or use a Private/Incognito window) cache, then check again.
b) If that doesn’t do the trick, add !important
to the CSS code, like this:
.page-id-2 {background-color: #99E8D0 !important;}
Clear the cache again.
c) If your site uses a full-width layout, not a boxed one, you won’t see the background color because the main container is covering the body.
Here’s an example using the default Twenty Seventeen theme.

As you can see, there’s only a bit of background color at the bottom of the page, but that’s because I only added a bit of content so you can see what I’m talking about.
If I would add more content to that page, it would stretch the container, completely covering the background.
So, changing the background color or adding a background image works best on boxed layouts.
What’s there to do in such cases?
Well, you’ll basically need to find out the CSS selectors of your main container and change its background color, not the body’s.
Even then, it might not look good, and you’ll have to change the background color of other containers as well.
That’s a Wrap
I hope you found the tutorial useful and comprehensive, and you managed to change the background color of a single page in WordPress!
If you have any questions or thoughts, drop a comment or send a message via contact or Facebook page.
You can also hit the follow button on Twitter and subscribe to the YouTube channel.
Don’t forget to share the post to help out others!
Great!
If I want to change the background color of each page post, by default?
Thanks!
If you want to change the background color for all pages, use the
.page
class for the CSS code. For posts, use.single-post
. If you want to change the color for both pages and posts, then you can usebody
instead (without a dot).Thanks, it helped. /T
To change a section of a page is not working for me.
woocommerce.page-id-35 {background-color: white !important;}
or
woocommerce.page.page-id-35 {background-color: white !important;}
or
#woocommerce.page.page-id-35 {background-color: white !important;}
or
.woocommerce.page.page-id-35 {background-color: white !important;}
Any answers?
What if I want to change the background color of the actual bit where the wording goes? I’ve followed the above steps and have a colored background, but only to the sides and below the white box where the page wording is. Hope this makes sense! Thanks.