How to Change Background Color in WordPress (Site, Page, & Block Level)

Most people don’t think about background colors until they’re staring at their WordPress site going, “why does everything look so plain?” Then they spend 45 minutes clicking around the wrong menus before giving up and Googling it.

This guide skips the confusion. You’ll find the method that fits your setup, whether you’re using the block editor, a page builder, or you’re comfortable pasting a few lines of CSS.

First: What Kind of WordPress Site Do You Have?

This matters more than most tutorials admit. WordPress background color settings live in different places depending on what theme and editor you’re using.

A quick way to check: go to your dashboard and look at the left sidebar. If you see a “Customizer” option under Appearance, you’re likely using a classic theme. If your editor looks like a grid of blocks when you open a page, you’re using the block editor (also called Gutenberg). Some people use both, depending on the page.

Once you know which situation you’re in, pick the method below that matches.

Method 1: Change the WordPress Body Background Color via the Customizer

This works for most classic themes and many block themes that still support the Customizer.

1. Go to Appearance > Customize in your dashboard
2. Look for a section called “Colors”, “Background Image”, or “Design” (the label changes by theme)
3. Click “Background Color”
4. A color picker appears. Type in a hex code if you know it (like #f5f5f5 for a soft off-white) or drag the selector around
5. Hit Publish

Done. The WordPress body background color changes across your entire site in one go.

If you don’t see a background color option in the Customizer, your theme may not support it natively. Skip to Method 3.

Method 2: Change Background Color in the WordPress Block Editor

This is where it gets a bit more interesting, because the block editor lets you change the background color of individual sections, not just the whole site.

For the Full Page Background

1. Open the page you want to edit
2. Click anywhere that isn’t a block (or use the Document tab in the right sidebar)
3. In the right sidebar, look for “Template” or “Page” settings
4. Some block themes expose a background color option here; others don’t

Honestly, full-page background through the block editor alone is hit or miss. It depends heavily on your theme.

For a Section or Block Background

This is where the block editor really works. Every Group block or Cover block lets you set its own background color.

1. Select a Group block (or add one by clicking the “+” and searching “Group”)
2. In the right sidebar, you will find “Block”
3. Under, you will find “Background”
4. Pick your color

You can stack multiple sections on a page, each with a different background. That’s how those alternating white/gray/colored section layouts work.

To change the WordPress section background color on an existing block:

Click the block, go to the Styles panel on the right, and change the background color there. If you don’t see color options, the block type might not support them directly; wrap it in a Group block first.

Method 3: Change Page Background Color in WordPress Using CSS

If the Customizer options are too limited, or you need to match a very specific color, CSS is the cleaner solution. This takes about two minutes.

1. Go to Appearance > Customize > Additional CSS
2. Paste this:

body {
  background-color: #your-color-here;
}

Replace #your-color-here with your actual hex code. For example:

body {
  background-color: #1a1a2e;
}

That gives you a dark navy background across the entire site.

Want to change the background on one specific page only? WordPress adds a unique class to the <body> tag for each page. It looks like page-id-42 (the number is your page’s ID, which you’ll find in the URL when editing the page in the dashboard).

So your CSS becomes:

body.page-id-42 {
  background-color: #fef9f0;
}

That only affects page 42. Every other page stays the same.

This approach to WordPress body background color CSS is the most reliable option across themes, because it doesn’t depend on what your theme exposes in the settings.

Method 4: Using a Page Builder (Elementor, Divi, etc.)

If you’re building pages with Elementor or Divi, ignore everything above. These tools have their own background controls.

In Elementor:

1. Right-click the section you want to change
2. Select “Edit Section”
3. Go to Style > Background
4. Choose Classic, then pick your color

You can also do this at the column level if you only want to change part of a row.

In Divi:

1. Click the section settings gear icon
2. Go to Design > Background
3. Set your color there

Page builders handle WordPress section background color per-element, which gives you a lot of control without needing CSS.

Common Problems (And What’s Actually Going On)

“I changed the background color but nothing happened.”

Two likely causes: either your browser is showing you a cached version of the page (hard refresh with Ctrl+Shift+R or Cmd+Shift+R), or your theme has its own background color set on a wrapper element that’s sitting on top of the body. In that case, inspect the element using Chrome DevTools to find the right CSS selector.

“The color changed but only in some parts of the page.”

Your theme probably uses a container or wrapper div that has its own white background. The body color shows up in the margins, but the content area sits on a white box. The fix: add this to your CSS and adjust the selector to match your theme’s container.

.site-content,
.content-area,
.wp-site-blocks {
  background-color: #your-color;
}

The exact class name varies by theme, so you’ll need to check yours.

“I want a gradient, not a solid color.”

For the body:

body {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

For block editor sections, the Cover block supports gradients natively; Group blocks do too in newer versions of WordPress.

Which Method Should You Use?

If you want to change the background color for the whole site: start with the Customizer. If your theme doesn’t support it, use Additional CSS on the body element.

If you want to change the background color for one page: use the page-specific CSS method with the body class.

If you want different backgrounds on different sections within a page: use the block editor’s Group or Cover blocks, or your page builder’s section settings.

The WordPress background color change process isn’t complicated once you know which tool is actually controlling the thing you’re looking at. Most of the frustration comes from trying the right method in the wrong place.