How To Properly Add Background Images To Your WordPress Site

Adding a background image to your WordPress site is easy. Right?

Not if your theme doesn’t support it. And wouldn’t it be nice if the background image was full-screen? Be good to have different background images on categories too. And while we are at it, how about using a post’s featured image as the background image?

In this Weekend WordPress Project, I’ll show you how to do all the above and add a visual finishing touch to your WordPress site.

Featured iamge
Add visual punch to your site with fine-grained control over background images

Before You Start…

Before we get into adding background images to your site, something to think about and two plugins to install.

Think About Your Images

Background images can bring many advantages to your WordPress site from visual enhancement to subtle branding. Here’s a recent example from the Australian Federal Government, no less, that adds a visual cue as to the content subject matter.

But you can’t just use any old image as a background; you must choose carefully and, especially make sure that the image is a suitable size.

Before applying these techniques to a live WordPress site check your analytics and, in particular, the screen resolutions of those visiting your site. This will give you a rough indication of the size your images will need to cover.

Install The Plugins

There are a couple of plugins that you’ll need to install to get background images working properly on your WordPress site:

  1. Background Images – this is my small plugin that will ensure that custom background images are supported by your theme and will generate the appropriate URL for the page being displayed (more on this later).
  2. WPCustom Category Image – this plugin adds featured images to categories. You only need to install this plugin if you want to change the background image for each category

Now that you have the plugins installed, let’s start adding some background images.

Adding A Global Background Image

Background images are provided by the custom background theme option. Not all themes support custom backgrounds so the background images plugin ensures that support is switched on which also means that the custom-background class is added to the body tag.

You can set up the background image either through the via Appearance > Background (left) or the theme customizer (right).

Screengrab of the Background settings page and the Background Image tab in the theme customizer
Two ways to add a global background image

Regardless of the method, use the following settings:

  • Position: center
  • Repeat: no repeat (backgrounds rarely, if ever, look good when tiled)
  • Attachment: fixed
  • Background Color: leave as is

Adding Featured Images For Categories

If you want to use a specific background image for a category then you’ll need to install the WPCustom Category Image will allow you to add a featured image for a category.

Once you’ve installed the plugin, go to Posts > Categories, select a category and you’ll see the Add Image button which will allow you to select an existing image from the Media Library or upload a new image.

Screengrab of the category edit page showing the featured image
The WPCustom Category Plugin brings featured images to WordPress

Configuring The Background Images Plugin

So, now you’ve set up your global background image and possibly featured images for your categories: you are now ready to configure how background images operate on your site.

In your WordPress admin interface, click on Appearance > Background Images to get to the plugin’s settings page. Let’s step through the options, one by one.

Screengrab of the settings page
Just four settings provides fine grained control over your background images

Display background on home page only

This setting will restrict the use of the background image to the homepage only. Effectively this means that the options for posts and categories will be ignored.

Make images fullscreen

Having fullscreen background images (essential stretching them if necessary) is essential but I’ve added it as an option so that you can control it. If checked, the plugin will inject this simple CSS that will ensure that your images are full-screen, no matter what the visitors screen size or device:

1
2
3
4
5
6
7
8
body.custom-background {

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

}

Note that this is CSS3 and so any visitors using an older browser such as IE8 or less will simply see the normal image.

Using featured image on posts

If this option is checked, then the post’s featured image will be used as the background image instead of the global background image.

If you decide to use this feature then make sure that the featured image you load up for posts are large enough to act as background images. Too big is fine as they will get resized for use as a featured image on the post.

If your theme does not support featured images then this option will be disabled.

Use featured image on categories

When checked, the plugin will check for a featured image for the category and if there is one this will be used instead of the global background.

If the WPCustom Category Image plugin is not active then this option will be disabled.

Further Tweaks

When testing this plugin across a couple of themes, it certainly seemed to be the case that not enough of the image was visible for it to be very effective.

The answer was to tweak the opacity of the main content container’s background to allow enough of the image to be visible to maintain continuity but not enough to make the content difficult to read.

For example, here’s a page with an opacity of 0.9: not a huge tweak but a massive difference in the impact:

Screengrab of a page showing the impact of changing the container opacity and letting the background image shine through
A small tweak to the content container background opacity brings visual continuity

To make this tweak to your site, you will take a look at the source of any page and find the classes for the first tag after the body tag. For many WordPress themes this is a div tag with the class site.

To set the opacity, use the following CSS:

1
2
3
4
5
div.site {

background-color: rgba(255,255,255,0.90);

}

Changing just the background opacity (the last setting) ensures that the font and images remain at full opacity.

You can add this CSS by either using a custom styling plugin (such Jetpack) or by creating a child theme (a bit overkill just for this tweak). Do NOT edit the main style.css file in your theme!

If, of course, you wanted your background image to be completely visible (as is the case with example I mentioned at the beginning of the article) then just set the opacity on the background-color to 0.

Get Creative In The Background

Adding backgrounds to your WordPress site, if done properly, can greatly enhance its visual impact. With these couple of plugins and the odd CSS tweak it’s possible to have pretty fine-grained control on what images are used where.

Time to get creative with your backgrounds.

Comments (2)

  1. Is it possible to set up a background image per author on a single wp site? I run a magazine, and would like to have a background image show up per author, not per page. Thoughts?

    • Dominic,

      If you are just interested in author backgrounds then there’s no need to use the plugin.

      All that’s required is to add a class to the body with the author id and then add CSS clauses for each author id to use the appropriate background image.

      The code to add the class to the body would look something like this:

      function add_author_class($classes){
      global $post;
      $classes[] = ‘author-’.$post->post_author;
      return $classes;
      }

      add_filter(‘body_class’,’add_author_class’);

      Add it as a plugin (preferable) or to the functions.php of your current theme.

      The CSS like this:

      body.author-2 {
      background: url( image.url) top center no-repeat fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      }

Participate