Disclosure: This post may contain affiliate links. Purchasing a product through one of these links generates a commission for us at no additional expense to you.
So you want to change your site’s background color.
It shouldn’t be tough, but here’s the thing…
Every theme uses different HTML to create the elements in your site. That means you have to be familiar with the theme to know how to customize it.
Often times, there isn’t a one-size-fits-all solution, but you may be in luck.
This might work
Copy & paste this CSS into the Additional CSS section in your Customizer (Appearance > Customize).
body {
background: #05B0E7;
}
That should make the background blue, and then you can change the hexadecimal color code to any color you want. You can use a color picker like this if you need help finding a hex code.
Because every theme is different I can’t promise that code will work, so here’s the next thing I would recommend.
This definitely will work
One question first:
Is this the only customization you’d like to make? Or would it also be nice to change the size of the post titles or the color of the header too?
If you’ve got a handful of modifications you’d like to make then you might really enjoy CSS Hero.
CSS Hero is the perfect tool for making visual customizations to your site. For instance, you can:
- Change background colors
- Choose new fonts
- Add background images
- Adjust spacing around any element
We have a complete guide on using CSS Hero, but here’s exactly how you can use it to change your background color.
How to change your background color
CSS Hero gives you a brand new interface to edit your site.
On the right side is a preview of the site. Click any element in the preview and the left side will fill with all of the available customization options.
All you have to do is click on the background of your site and then select the Background option in the left side.
Selecting the Background option reveals the color setting and a number of position options for background images.
Clicking the transparent (checkered) color box reveals the color picker where you have full control over which color is used.
Even cooler is the fact that the color updates instantly as you use the color picker.
All of the changes you make are only visible to you until you click the Save & Publish button at the bottom. Then your modifications are published live on the site for everyone to see.
Start customizing your site
If you know how to write CSS and find selectors to use, you can make customizations like this with code. Otherwise, you likely won’t be able to find a copy/paste snippet online because every theme is different.
In these cases, CSS Hero is an awesome tool and will save you a ton of time. Plus, it’s nice knowing you can always make style changes to any theme you choose in the future.
You can click here to try out CSS Hero or visit our tutorial to learn more about how it works. You might also enjoy some of the ideas in our WordPress customization guide.
