How to change background color in WordPress

August 9. 2021

One of the first things that website visitors notice is its background. Sometimes, it’s just a simple color, but it can also be an image or any other combination of visual materials. Alongside the first impression, it’s one of the essentials of quality design. For good or bad, it will reflect your brand, style, readability, and even professionalism itself. That’s why deciding on the background color in WordPress is, generally, one of the first designing choices. The problem is that with so many themes out there, there comes a lot of different customization options. Some allow you to change everything on the spot, while others offer scarce and limited options.

A few ways to change background color in WordPress

As you probably assume, everything can be done with a bit of coding knowledge. However, not everyone working with WordPress is programming professionally. The majority of average users need beginner-friendly solutions to customize their pages. Among these, changing the background color in WordPress is one of the common issues. Of course, you can always rely on professional WordPress site care assistance to help you build up any elements and complete your website design. But, if that is not an option for you, you can try different approaches to personalize your website.

However, it’s not always that simple. The first decision you have to make is the type of background you want. There are few popular options you can choose, and even combine:

• You can choose a simple color or any combination of colors
• Combine one or more colors into gradients
• Place image/s as your background
• Use videos instead

Once you decide if want to simply change background color in WordPress, or use more complex options, it’s time to discover a few methods to apply the customization:

1. If your theme supports the custom backgrounds
2. You can try to use a simple code
3. Change background color in WordPress with plugins
4. Use advanced tools to customize everything

1. If your theme supports the custom backgrounds

In most cases, you can easily check what options your theme supports by going to Appearance > Customize. There, you will be able to see what customization options are allowed. Sometimes you’ll have the option to choose Color, Background Image, Colors & Dark Mode, Color and Background, etc. It’s really depending on the theme. If it does support it, you can simply select the desirable offer and make further customization.

Once you find a proper option to change background color, simply click and explore a pretty intuitive interface. Usually, you will be given a few default color options to choose from. But, there is always the “Choose the palette” option nearby. Or, you can simply type in the hex code for any color.

Besides colors, some themes give you an option to place images and other visuals. From here, you will be asked to upload the background image into your media library and select it directly. In addition, you can set up its position, repetition, underlying or overlaying color, and many more.

2. You can try to use a simple code

If you are a bit familiar with CSS, you can make simple customizations by adding custom code. It’s nothing too advanced, especially for setting the background color. Simply go to Appearance > Customize, select the “Additional CSS”, and enter the next line of code:

.body { background-color: #fff; }

Here, the “#fff” can be any hex code for colors of your choosing. Generally speaking, you can easily find the color code by using any of the color picker tools. However, this may not be functional, or allowed, in all themes.

3. Change background color in WordPress with plugins

SiteOrigin CSS

If other options are not giving the results, you can always use plugins to get the job done. WordPress plugins, like SiteOrigin CSS, are powerful tools that can give you back control over customization. This plugin, specifically, allows you to easily edit the background color, and check how it looks, in real-time. Which is, essentially, what most beginners need. If you are an advanced user, you will like its auto-completion feature when adjusting the CSS code. Furthermore, its “Inspector” can help you find any selector you might need in no time.

The best part, SiteOrigin CSS is a free plugin that works with any theme.

AWB – Advanced WordPress Backgrounds

When you need more than just changing the background color, AWB is a simple yet effective plugin that adds a bit of an edge to your website’s layout. Besides the classical option, AWB allows you to use more complex background solutions, such as:

• Parallax backgrounds
• Mouse parallax
• Patterns
• Various image formats
• Overlay color with transparency
• All kinds of different video formats, both self-hosted and from online sources

In addition, you can use its visual shortcode maker to make the process easier. And, if you prefer some of the popular WP builders or Gutenberg, it functions perfectly well with them.

4. Use advanced tools to customize everything

When none of the above is enough, and you need a more “robust” solution, there is a pretty advanced plugin by the name of CSS Hero. It’s more of a complete customization system that demonstrates the effectiveness of the WYSIWYG interface. Which, basically, stands for the “What You See Is What You Get” principle. CSS Hero is a plugin that’s working out of the box, offering compatibility with most themes and other plugins. In practice, you can simply click on any element and change its attributes like colors, backgrounds, fonts, and much more, without any trouble. Every change you make is immediately visible thanks to its live preview.

Despite its functionality, being the lightweight plugin is CSS Hero’s best characteristic. On top of it, any change you make is not modifying the theme files. You can easily uninstall it, after your work is done, without the risk of breaking your website. The only drawback is it’s a premium plugin that requires a paid subscription.

Conclusion

When you want to change the background color in WordPress, sometimes it’s not simple enough. While, occasionally, it’s possible to use default WordPress customization options, it’s not always so. In some cases, having some coding knowledge can help you find a quick solution. But, since it’s one of the best WordPress’ features, plugins can help you complete almost anything.