How To Change Your Wordpress Theme Background CSS

In response to the piece on How To Change , I received a request from Claudia Gillentine:

Thank you for the help on changing header images. Would you please do the same kind of help for changing the background colors? The simpler Wordpress designs are wonderful for our small public library but they are so glaringly white. I really like your page with the soft grey. It is so easy on the eyes. Thank you so much for your beginner’s guide to 2.7 also–so well written and easy to follow.

So Claudia, here it is.

Changing your Wordpress Theme background is simple, however, you need to modify your theme’s CSS code. The theme style is usually in a file called style.css.

If your style.css file on your web server has a file permission set to allow others to write (666 or 766), you can edit it in your Wordpress administration by clicking the Appearance | Editor link (see Figure 1).

Figure 1:To Change a Wordpress Theme background in Wordpress Administration, Select Appearance Editor

If you see the Update File button (Figure 2) at the end of the editing box, you know you can change the file content. Continue with “Changing the Theme Background.”

Figure 2: The Update File button in your Wordpress Editor means the file can be edited.

If you see a sentence that says “You need to make this file writable before you can save your changes. See the Codex for more information.” or something similar, then it means your theme files are not set with write permissions. Click the link text “the Codex” for more information on changing the file permissions.

Or you can change the style.css file by downloading the file from your web server with an FTP program, editing it with an HTML-friendly text editor such as BBedit, CSSEdit or even Notepad and uploading the changed file back to your web server with your FTP program.

Note: Do Not edit your HTML and CSS files in any Microsoft editor except Notepad! They will add unexpected changes and can destroy your themes.

Changing the Theme Background

1. If it is not already selected, select the stylesheet, usually style.css, from your Theme Files left in the right-hand column (Figure 3).


Figure 3: Be sure you have selected the stylesheet from your Theme Files.

2. Scroll down until you see the body selector and its properties. (Figure 4).


Figure 4: Find the body selector and its properties

3. What you want to change is background property value. If your Wordpress theme simply assigns a background color value, then changing it is easy. The background property will look something like this:background: #4A79B5; ORbackground-color: #4A79B5What you want to change are the numbers and/or letters after the # sign (the value).
   See the underlined property in Figure 4.

   If your Wordpress theme uses a background image to create the background, it include the URL of the background image and look something like this:

   background: #4A79B5 url(images/body-bg.jpg) repeat-x top left;


   Now you have to decide if you want to keep the background image. If you do want to keep the background image but change its color, you will need someone to change the actual image file in an image editing program like Photoshop. And that’s beyond a simple text tutorial like this one.

   Hey, wait a minute, Carolyn! The example in Figure 4 only has 3 letters after the # sign. Do I need 3 characters or 6 characters? Glad you asked that question. The HTML color codes are made up of 3 hexadecimal numbers. The hexadecimal numbers are composed of 2 characters, therefore, colors made up of duplicate characters can be abbreviated with just 3 characters. For example, the color white in HTML is #ffffff which can be abbreviated #fff and black is #000000 or #000 for short. To avoid confusing yourself, just use all 6 characters. It’s better coding practice anyway.

   Before you make a change in your stylesheet make note of your original color number. You’ll thank me later.

4. Now simply change the HTML color code for your body background property.

Uhm, okay, Carolyn, how do I know what color code I want? Another excellent question! There are a plethora of HTML or web color charts on the Internet. You can google HTML color chart or web color chart, but one of my favorites is the Sortable Color Name Chart. Keep in mind that you can’t actually control the exact color other people will see since all monitors show colors a little differently, however, these colors are ones that you can be fairly certain will be close to consistent across monitors.

5. Once you have changed your HTML body background color, click Update File button (Figure 2). Once you have updated (i.e., saved) your file, you will see yellow band beneath Edit Themes that states File edited successfully (Figure 5).


Figure 5: A yellow band beneath Edit Themes reading File edited successfully should appear..

But What If Your Want to Change the Background of Some Other Part of Your Wordpress Theme?

Well, I can’t give you complete training in modifying your Wordpress Theme or CSS in this simple post, but the technique will be the same. The key is figuring out what background you need to change. For example, on my site, the background for everything except the header is not quite white. If you look at the source code for my site, you will see a <div id=”wrapper”>. If I change the background CSS for the ID wrapper, which will be listed as #wrapper, I’ll be changing the background for everything inside that division that hasn’t been assigned a different background (which in my case are the header and footer divisions).

The trick is figuring out what background you want to change. Each theme is a little different.

If you aren’t certain what you need or want to change, you can always scroll through your style sheet and change each background color one at a time and see the results.

Remember, make a note of the original background color before making any changes!

Chances are good you’ll want to switch most of them back to the original color. Make the changes one at a time and look at the results before changing another one. It’s sometimes surprising what a difference a single background change can make!

I hope this helps, Claudia and everyone else.

Tagged as: CSS, guide, Wordpress, Wordpress how to, Wordpress theme