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