Essential Keystrokes is…

where I share my favorite tips, tools, reviews and commentary on web design, marketing, blogging, new media and related topics. For more about this site and the voice behind it, check out my About page.

Connect

SubscribeFollow me on TwitterLinked In Stumble Upon What I Digg Email me
Dec
05

Tutorial: Add a Background to your WordPress Theme

By Char

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:

WordPress background tutorial

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.

WordPress background tutorial

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.WordPress background tutorial

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.

WordPress background tutorial

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.

WordPress background tutorial

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).

WordPress Background tutorial

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

WordPress Background tutorial

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!

Categories : Tutorials, WordPress

26 Comments

1

This is a great tutorial Char! The instructions were very easy to understand.

2

Thanks for this great tutorial. I had someone set up my first wordpress blog, but I’m working on one myself right now. This is a huge help. I’ll be checking back to see the rest of your tutorials.

3

I’m learning a lot everyday…this is an awesome tutorial….

4

Thanks for the tutorial. I have a question. It seems the background image is repeated, how can I stop it.

5

Saikat – you need to add no-repeat, repeat-x or repeat-y after the image location to control whether or not the image repeats. Does this help?

6

Thanks, that worked. But the problem is the image has a color shade. It blends from light colored pattern to darker. Now, if I put no-repeat or repeat-x, the bottom portion of the index page looks odd with no background. Any suggestions?

7

Hey! I like this site, but I”m confused on how to change a backgound! I don’t c where is says presentation?! WordPress just changed their format, so how do u do it now??

8

amanda, in version 2.6 you want to go to “Design” then “Theme Editor” then click the “Stylesheet” link at the lower right. That should get you to the style.css and then scroll to the background tag to make your changes.

9

Garret – thanks for jumping in and answering that for Amanda! For some reason I had missed that question.

10

I just want to make sure I’m understanding correctly – are these changes that can be made without purchasing the CSS upgrade or do they assume you have already done that? I’d love to just change a few things like bkgd w/o paying for an upgrade…Thanks!

11

Tara – these instructions are for the self hosted wordpress.org sites. If you have purchased the CSS upgrade at WP.com it should work, too.

12

Thanks for this tip, cheers.

13

Thanks for the tips, helpful for beginners like me :)

14

Hi Char…. I am not sure if I am doing this right or not. But I am pretty familiar with .css and html codes. I had changed my background image alittle and saved it as the same image name and uploaded it to the themes/power-dream/images folder. But for some reason it said it uploaded but the file was not updated.

So not sure what I am doing wrong…

Any help would be great….

thank you
Julie

15

I can’t get this to work…can you see an error?

body{
font-family: verdana;
font-size: 95%;
line-height: 115%;
background-color: #FFFFFF;
background-image: url(‘images/wallpaper-stripes.jpg’);
background-repeat: repeat;
background-position: center top;
text-align: center;

16

what about the page, itself ???
How do I get the page to change from white to pink, or yellow, or something ??

I’m talking about the inner page. and, come to think of it, what’s that called anyway?

17

Wow, didn’t think I could learn how to change the background in like 3 minutes! Thanks!

18

Thank you so much for this tutorial, I was wondering how to do that for the longest! :)

19

Thanks for that great tutorial. I was looking for a background of a picture of sky, sun, grass or other nature theme to put into my eco blog but could not find among the paterns. Is there a place I can find this?

20

Hi I did what you said to and I also previewed the changes but it says you need to purchace inorder to save the changes. is there a way around that?

21

Liz – these are instructions for WordPress.org. You are using the WordPress.com version which has more restrictions on it.

22

I had a heck of a time locating the background setting in the script. I found 35 different places in the script where the word ‘background’ appeared. Eventually I found I didn’t have to edit the script after all! My theme came with a special theme editor where the options can be set.

23

Thanks Char with this information I finally changed the background on my website to pink, which fits it so perfect because it’s about pink beauty products! I’m so exicited and thanks again.

24

Freaking AWESOME!!!! I cannot wait to add a carbon fiber background to my car blog!

25

I have just started using WP and downloaded a Directory Press theme I tried updating the colours but can’t get it to work hoped it would be as easy as you show?

Would DP have locked the template or something? have asked them but they say I need a code person if I can’t do the HTML… but I cannot afford to so searched and found you.. any ideas please? thanks :-)

26

You should be able to change the colors in the CSS file.

Leave a Comment

RECENT PROJECTS

Team Training NE Celiac Family