Tutorial: Add a Background to your WordPress Theme

Note: This is one in a series of tutorials on customizing your WordPress theme geared to the beginning or intermediate WordPress user.

One of the easiest ways to customize a basic WordPress Theme is by changing the background. Using this step-by-step guide, even novice bloggers can make small changes that will have a big impact!

When you first install WordPress the default template is loaded and it looks something like this:

In order to make changes to it, you need to first log in to your WordPress dashboard, choose Presentation and then Theme Editor. On the right hand side you will see a list of files you can edit. Select style.css.

Scroll down to the part of the code labeled body. In that code block you will see a line that says background. This is the part of the code that tells the template what color and/or background image to display. If you just want to change the background color and do not want an image in the background, you can easily change it.

I deleted the piece of code starting with “url” and replaced the color code with one for a deep red – #990000 (see a complete list of color names and codes). Once you make your change, select Update File and go take a look at your results.

Let’s say you want to get a bit fancier and would prefer to use one of the many beautiful free backgrounds available on the web (check my list of 13 sites for Beautiful Patterns and Backgrounds first). In which case, you need to find the background you want to use and download it. Use an FTP program (Need help? See my FTP tutorial for details) to transfer the .gif or .jpg file into the theme’s image directory.

Once the file is there, go back into your WordPress dashboard, select Presentation, then Theme Editor and open up the style.css file again. Take a look at the background line of code again and change kubrickbgcolor.jpg to the name of the background image you want to use – in my case, distressed-in-blue.gif (from Din Pattern).

Select Update File and take a look at your handy work.

Each theme you use is going to coded a bit differently, but the majority of them should operate very similarly to this – especially the ones that are well-coded. Once you get comfortable working with the style sheet and its components, it is relatively easy to make basic customization changes.

If you are up for it and would like to learn more about the code for WordPress theme, there’s a good tutorial on creating your own WordPress theme.

I plan on adding more tutorials to this series in the near future with one on adding a graphical header, customizing your fonts and colors, as well as other basic WordPress techniques. If there is any particular topic you would like me to deal with sooner rather than later, let me know!