HOW TO – BLOCK EDITOR – CHANGE BACKGROUND COLOR

change background color of posts on wordpress.org

To change the background color of posts on a WordPress.org self-hosted website, you can use the Site Editor (for Block themes), the Theme Customizer (for Classic themes), or Custom CSS. [1, 2]

Here is how to apply each method depending on your setup.

Method 1: Using the Full Site Editor (Block Themes)

If you use a modern block theme like Twenty Twenty-Three or Twenty Twenty-Four, you can edit the global Single Post template. [1, 2]

Navigate to Appearance > Editor from your dashboard.
Click on Templates and select Single Post.
Click the canvas area to open the editing mode.
Click the Styles icon (the half-black, half-white circle) in the top right.
Click Colors, then select Background to pick your new color.
Click Save in the top right to update all single blog posts. [1, 2, 3, 4, 5]

Method 2: Using Custom CSS (All Themes)

If your theme does not have a native setting for post backgrounds, adding a small snippet of CSS code via the Theme Customizer is the most reliable way to update all posts at once. [1, 2]

Go to Appearance > Customize.
Scroll to the bottom of the menu and click Additional CSS.
Paste one of the following snippets into the text field: [1, 2]

To change the background of ALL single blog posts:
css
.single-post { background-color: #ffcc00; }
Use code with caution.
To change the background of just the main text container inside the post:
css
.single-post .entry-content { background-color: #ffffff; padding: 20px; }
Use code with caution.
[1, 2]

Change #ffcc00 or #ffffff to your desired Hex color code.
Click Publish to apply the layout changes live. [1, 2]

Method 3: Using the Classic Theme Customizer

Many classic themes build specific options right into their custom menus. [1]

Go to Appearance > Customize.
Look for tabs named Colors, Background, or Blog.
Locate the Post Background or Content Background color picker.
Select your color and hit Publish. [1, 2, 3, 4, 5]

Method 4: For Individual Specific Posts

If you only want to change the color of one specific post instead of all of them: [1]

In the Block Editor (Gutenberg): Wrap your entire post content inside a Group block, then use the right sidebar block settings to alter that specific group’s background color.
Via CSS: Use the unique post ID class generated by WordPress (e.g., .postid-123 { background-color: #f0f0f0; }). [1, 2]

If you’d like to tailor this perfectly, let me know:

What theme are you currently running?
Do you want to change the color of all posts or just one single post?
Do you want to change the entire page background or just the text box container background?

change background of blog single post only? – WordPress.org

Hey @rnmartinez – that’s definitely something should be possible. The way I’d expect the TwentyTwentyThree theme to work is to hav…

WordPress.org
Change category posts background a different color

Moderator threadi. (@threadi) The category pages are usually generated by the theme in such a way that they have their own class o…

WordPress.org
Change blog post background/title color – WordPress.org

[but from this setting background color also change on pages and blog post detail page]. … Thanks so much! That worked perfectly…

WordPress.org

Show all

You said: just one post

To change the background color of just one single post, use either the Block Editor method or a targeted CSS snippet. [1, 2, 3]

Method 1: The Group Block (Easiest & No Code)

If you are using the modern Gutenberg Block Editor, you can change the color directly inside that specific post. [1]

Open and edit the specific post you want to change.
Select all the blocks inside your post (or press Ctrl+A / Cmd+A).
Click the block toolbar icon and select Group to wrap everything into one container.
Look at the Block settings sidebar on the right side of your screen.
Click Styles (the contrast circle icon), select Background, and choose your color.
Update the post. [1, 2, 3, 4, 5]

Method 2: Targeted CSS (For a completely unique page color)

If you want the entire page background of that specific post to change, you can target it using its unique Post ID. [1]

View your live post in a browser and look at the URL to find the number (e.g., ://yourwebsite.com means your ID is 124).
If you use friendly URLs, right-click the page, choose Inspect, and look at the <body> HTML tag at the top for a class like postid-124.
Go to Appearance > Customize > Additional CSS from your dashboard.
Paste this code (replace 124 with your actual post ID number):
css
.postid-124 { background-color: #ffcc00 !important; }
Use code with caution.
Change #ffcc00 to your preferred hex color code and click Publish. [1, 2, 3, 4]

To help you get the exact design you want, tell me:

Are you using the Block Editor or the Classic Editor?
Do you know your Post ID, or would you like help finding it?
Do you want to change the entire window background or just the text box area background?

How to Change the Background in WordPress » Rank Math

Aug 19, 2022 — Once you have your post ID, you may use the following custom CSS to modify the background color of a single post. Replace the post…

Rank Math
How To Change Background Color In WordPress?

Jun 14, 2026 — 4. Change Background Color Via Block Editor The WordPress Block Editor, also known as Gutenberg, allows you to change the backgrou…

ULTIDA
How to Change the Text Color in WordPress (For All Themes)

May 9, 2026 — 💡Quick Answer: How to Change Text Color in WordPress Method 1: Block Editor – Choose this if you only need to change the color of…

WPBeginner

Show all

Click Styles (the contrast circle icon), select Background

You said: I don’t see this option

If you do not see the Styles option or the background settings, your current theme likely lacks native support for block background colors, or you might be clicking the wrong area. [1]

Here is how to fix it or use an alternative layout block.

Fix 1: Select the “Block” Tab, Not “Post”

The sidebar has two separate tabs. If you are looking at post details, the style options will be hidden. [1]

Click directly on your Group block in the editor.
Look at the top of the right-hand sidebar.
Ensure the Block tab is selected, not the Post tab.
Look for a Style section (often represented by a small half-moon or contrast circle icon) or a direct Background option under the “Color” heading. [1, 2, 3, 4, 5]

Fix 2: Use a “Cover” Block Instead [1]

If your theme restricts the Group block from changing colors, the Cover block is a foolproof alternative that forces background color controls to appear. [1, 2]

Click the + icon in your editor to add a new block.
Search for and select Cover.
Choose a solid color from the initial prompt instead of uploading an image.
Drag and drop all of your post’s text and images inside this Cover block.
In the right sidebar under Block, use the Overlay opacity slider and set it to 100 if you want a completely solid color. [1, 2, 3, 4, 5]

Fix 3: Use the CSS Method

If the editor settings are completely restricted by your theme, you can bypass the editor entirely. You can use the targeted CSS method provided in the previous step, which works regardless of what blocks or themes you use. [1]

If you want to try the CSS fix instead, let me know:

Do you know your Post ID number?
What color (or Hex code) do you want to use?