Changing Background Color For Your WordPress Theme

There are two backgrounds in a WordPress Theme. One is the overall background. If you have a fixed width theme, the color surrounding the contents is the overall background. The other is the content background. That is the background color that you see in your contents area. Changing the overall background color is very easy and straight-forward, but it might be a bit tricky to change the content background if you are dumb like me when it comes to codes. Today, we do the easy one first and that is to change the overall background color.

In all WordPress Themes, the codes for are written under the “body” division and it appears as the first batch of codes that you see when you open your stylesheet. It will look very similar to these codes, though some may be shorter.

body {
font-size: 10pt;
font-family: georgia,times,’times new roman’, serif;
background: #713600 url(images/planks.gif);
color: #303324;
text-align: left;
margin: 0;
padding: 0;
line-height: 140%;
}

What we are interested in now is the line of codes that I have italicized. If your background is just plain color, then you will not see the “url” of any images and there will only be number. Those numbers are the html color codes. Always include the “#” sign before the numbers. To change the overall background color, just change the html code numbers to a color you like.

Of course you will not know what number represent which color, so go Google for the term, “html color chart” and use any color chart as reference to find your favorite color. There is a nifty little tool called Pixie by Nattyware that I use often to check the codes for certain colors. Just hover your cursor over any color and the codes will appear in a small window. I find it very useful especially if you want to change your Adsense links to blend exactly with your normal links.

After getting your favorite color code just change the numbers in the “background”. You should see the new color after refreshing your browser. Now the image if you have one. If you want to change that, you will have to look for a new image and save it like what you did in my previous post. Only this time, you have to open the original image in your theme’s image folder and see the exact size.

Images are normally set to repeat, that is you upload a tiny image like 2 px and it when your theme loads, this image keeps repeating until it fills up your whole page. The example above does not show, but sometimes you will see the words, “repeat x, y” after the image URL. “Repeat x” will tell the browser to repeat the image from left to right and “repeat y” means repeating the image from top to bottom.

I never like images as background and I think neither should you. It is very distracting for your readers. Just keep it to a single shade or maybe two shades like this theme I’m using. I feel a background color like this is more elegant. If you don’t like images as a background, just delete the line of codes that says “url(images/xxx.gif)” Remember to leave the semi colons alone, and you will have a plain background with your favorite color.