How to Add a Background Image in WordPress

Background images can go a long way towards making your website more appealing to your visitors. More compelling than a monochrome background, they can illustrate a point you are making or set the mood for your entire site.

In this tutorial, we will show you several ways in which you can add a background image in WordPress. Here is what we will be discussing:

But before we begin, we have to note that it’s not possible to give a single, definitive answer as to how to add a background image in WordPress, due to many factors affecting the overall layout and look of a webpage. The theme, above all, dictates the ability or inability to add a background image to parts or the entirety of a page. We have provided you with three different ways, but they may not all work, or may work differently, depending on the theme you are using. Even the term “background” may relate to different areas of different themes. Still, read on as one of these methods might be just the thing you need.

How to Add a Background Image Using Your Theme’s Settings

This might be a good moment to point out that large, high-quality images tend to slow down loading times. Still, there are things you can do to optimize your images and make them as easy to load as possible. If you are building a website with loading speed in mind, we have also covered repeating (tiled) backgrounds.

If your theme has a background setting, as many popular themes nowadays do, you could use it to set up your background image. Most themes which have this functionality work much the same. We used WordPress’s default Twenty Twenty theme.

First, you need to navigate to the theme customizer from Appearance>Customize in your WordPress dashboard.

Next, you want the Background Image submenu on the left-hand side of the screen.

Clicking that will bring you to the Select image button. You can add a background image from your media library, or you can upload one. We have selected one from our media library.

And there you go, you have now changed your background.

The Twenty Twenty theme we are using gives us some options here. You could use an image which can be tiled (repeated), such as our little green leaf there, or you could use a single image for your background.

If so, you will need high definition images for your website which will take up the full width of your page, but they can take a lot of time to load and may lead to poor user experiences. It is really up to you to find out which images and settings work for your theme and your website style.

Note, though, that while many themes do have the option of adding a background image in this way, most don‘t, which is why you may need to resort to one of the other two methods we have outlined in this article.

How to Add a Background Image Using CSS

If you are more of a hands-on user, you also have the option of changing your CSS in order to set up a background image for individual posts, but also categories, authors, and other CSS classes.

You can change the background for a category, or for the entire website, using the theme customizer. Navigate to it from your WordPress dashboard by clicking on Appearance>Customize.

Once there, open the Additional CSS section.

You will need to add some lines of code to the CSS field in order to add a background image. To change the background for the entire website, use this code:

body {
background-image: url("XXX");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

You will, of course, need to replace XXX with the URL of the image you would like to use. We have selected one from our media library.

If you want to change it for pages with a certain category, though, it works a little different. The code you want is this:

body.category-YYY {
background-image: url("XXX");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

You will, as above, need to change XXX to a valid image URL, while also swapping YYY with a valid category.

And that‘s really all there is to it!

How to Add a Background To Specific Content Sections

Now, as always, our suggestion is to use a theme‘s functionality whenever you can, as it is tried and tested to work. However, if a theme you are using does not have the functionality you need, you can probably find a plugin that does. Our plugin of choice is Advanced WordPress Backgrounds. Once you have installed and activated the plugin, you will have gained a special Gutenberg block which you can use to set up a dynamic background.

This plugin primarily works by setting up a kind of a meta-block, which acts as a background, and which you then need to populate with another block or blocks.

We will show you how to do this in a post.

First, we will create a post from our WordPress dashboard by selecting Post>Add New. Then, after typing in the title and populating it with two paragraph blocks, we will hit enter after the first paragraph, and then click the plus sign and add a Background block.

Now you need to configure the block. The default setting is Color, which is a simple block of color you can choose if you want a monochrome background. Another interesting option is the Video background. You can use this plugin to set up a video background, whether on loop or single-play, and you don‘t even need to host it on your website: the plugin supports YouTube- and Vimeo-hosted videos. For this demonstration, though, we are mainly concerned with the Image background.

Clicking the Image button, you will find a set of controls for this plugin. In the Image section, click the Select image button, and either upload an image or select an image from your media library.

Once you have done that, you will find that the image has taken up part of the background. On the right-hand side, you will find parallax and spacing options which you can use if you want to make your website look a little more dynamic. At the very top, you will find the positional controls. You can select which part of the image will be shown based on the position of the indicator on the axes. The default (50% horizontal and 50% vertical) is where we will leave it now – right smack in the middle of the image.

Now, we will need to add the content this image will be background to. To do that, simply click on the plus sign in the middle of the background block. We will go for a paragraph block, but you can choose any block you like. A quote or a heading, for instance, might look great against a parallax background.

We have pasted our text and changed its colour in the block settings tab to white, the better to be offset by the background. And that‘s really it.

Now, clicking on the preview button, we can see the plugin in action.

And now you can add whatever kind of background you want to whichever individual content section on your website you wish to emphasize.

In Conclusion

A background image can really make your website stand out to your users like a big, shiny needle in a haystack of drab straw. However, that does come with a cost: you will probably need to store large-format media, and they will adversely affect loading times. Still, gorgeous graphics remain the best way of making a lasting first impression, and internet users have come to expect professional, eye-catching design. The background is likely going to be the largest single graphic element on your visitors‘s screens. If you can afford the increased loading time, why not make your visitors’ experience visually interesting? So, whether you do it using your theme‘s native settings, a plugin, or CSS, you now know how to do it.