How to Add a Background Image to Your WordPress Site

 

WordPress has changed since this post was written, and putting a background image on your site is much easier now. Go to Appearance > Background and add one there.

Perhaps one of the easiest ways to make your site look unique, even if you’re using a popular and well-worn theme, is to add a background image. Your header and your background are two graphical components that your visitors will definitely take note of if they’re strong.

The problem with background images, however, is that many themes still do not provide an easy way to add them or change them. And so in this tutorial, we will go over how to manually add a background image and control it with CSS.

The default TwentyEleven theme does indeed provide an easy way to add a background image in the Admin section (Appearance > Background); however, in this tutorial we’ll go through the steps for adding an image manually to TwentyEleven. The steps involved for other themes will be nearly identical; however, you may find some slight differences in your CSS file (style.css).

Step-by-Step Tutorial for Changing Your Background

Starting with the default WordPress TwentyEleven theme, I want to change the background of the site from gray to a blue background image with a white glowing center.

This is a small version of my blue background image.

Getting Your Image and Uploading It

Depending on what your background image will be, you will need to decide whether you want it to repeat itself on the page or not. In this tutorial, I don’t want my image to repeat itself. I just want it to sit behind the content portion of the site and have the “glow” peek around the edges.

Because I’m not repeating my image, I make it large enough so that it will peek around the edges, and then I upload it to the images folder in the TwentyEleven folder on my server:

wp-content > themes > twentyeleven > images

Featured Plugin - WordPress Infinite SEO Plugin

Fully integrated with the SEOMoz API, complete with automatic links, sitemaps and SEO optimization of your WordPress setup - this is the only plugin you need to help you rank your site number 1 on Google - nothing else compares.
Find out more

Call Your Image with CSS

Now that I’ve got my image uploaded, I need to find the section in my CSS (style.css) file that controls the background for the site.

Appearance > Editor > Stylesheet (style.css)

What you are looking for here is the “background” selector for the entire site. If you search for “background” in your CSS file, there’s a good chance you will find more than one (there may be a background defined for a sidebar, for example, or for a number of other things).

In the TwentyEleven theme, there is a section conveniently labeled “Global.” And under that, we find a background selector for the “body” section.

Now that I’ve found the section for the background, I’m going to call in my image. We will need to make a few adjustments after we do this, but I will go through this step by step to show how making these adjustments changes things.

Here is the code I add to call my background image (which is blue-glow.gif):

background-image: url(images/blue-glow.gif);

(Remember that I put the image in the images folder of my theme – that’s why I can just use image/blue-glow.gif to call the image.)

So this is what my CSS looks like at this point:

body {
 background: #e2e2e2;
 background-image: url(images/blue-glow.gif);
 }

With that CSS, this is what my site looks like. (I have increased the perspective here to get a better picture of what’s really going on with my background.)


As you can see, the background is repeating. But that’s not what I want, so I will need to add values to my stylesheet in order to control that, and so I add the following “no-repeat value”:

background-repeat: no-repeat;

And so now my complete background CSS looks like this:

body {
background: #e2e2e2;
background-image: url(images/blue-glow.gif);
background-repeat: no-repeat;
}

Featured Plugin - WordPress Membership Site Plugin

If you're thinking about starting a paid, or just private, membership site then this is truly the plugin you've been looking for. Easy to use, massively configurable and ready to go out of the box!
Find out more

When I look at my site, everything seems to look all right, but when I enlarge the perspective or I scroll down the site to make sure, I see that things aren’t quite right. I can see that the image eventually ends and the original gray background takes over. In addition, while it might look all right on the sides of the site, if someone has a wider view than me, they may see the image ending on the sides as well.

In order to fix these issues, we’ll need to change a few more things.

As you can see above, the background image is actually aligned to the left. It may look OK in your browser, but it may not look OK for everyone, so we’ll want to align the image to be in the center of the screen and aligned on the top.

To do that, I add the following CSS:

background-position: top center;

That solves the potential alignment problem, but I still have the issue of the image ending and everything suddenly changing to original gray background.

In order to solve this problem, I simply change the original background color from gray to the shade of blue that my image eventually bleeds into at its edges.

The original color was #e2e2e2, and so I change that to my custom color: #6B8CC2.

And so now my complete CSS section for the body background looks like this:

body {
background: #6B8CC2;
background-image: url(images/blue-glow.gif);
background-repeat: no-repeat;
background-position: top center;
}

And when I look at the result, everything looks as it should. No matter how much I zoom out to get perspective, everything still looks fine.

Making Backgrounds Work for Your Specific Situation

As you can see, controlling your image with CSS is the most important element in getting your background to look the way you want it to. Because there are so many different things you can do with background images, and so many different situations, the tutorial above may not fit your needs exactly. However, it should give you some basics to start with, and from there you can search out the appropriate CSS for your site.

One of the more popular places to get CSS info is from W3Schools.com (here is their section on backgrounds).

Featured Plugin - WordPress Q&A Site Plugin

It's now incredibly easy to start your own Q&A site using nothing more than WordPress - The Q&A plugin simply and brilliantly transforms any site, or page, into a perfect support or Q&A environment.
Find out more

Photo: Vector Website Design Template from BigStock

Comments (14)

  1. Arnel – There should be a button on the bottom left that says, “Update File.”

    That said, WordPress has changed since this post, and putting a background image on your site is much easier now. Go to Appearance > Background and add one there.

Participate