Add a Background Image in WordPress: How to do it?

September 22. 2020

Most web designers usually struggle with making their website stand out. Of course, having a well-running, properly optimized website is a priority. But, once you set it up, you’d want people to notice and remember it. Ideally, the art assets and the layout of your website should invoke a certain feeling with your audience, which will help them remember your website for a long time. One of the best ways to make this possible is to add a background image in WordPress. But, as you will soon learn, picking the right image and adding it is not as straightforward as some of you might thing. So, without further ado, let’s see what adding a background image to a WP website is all about.

Choosing the right image

Before we go into how to add a background image in WordPress, we should first go over the basics of choosing the right one. A lot of people add a background image to their website. But since they choose the wrong one, they don’t get much benefit from it. So, here is what to keep in mind.

Working with your website theme

One of the basic rules of website design is that every website needs to have a theme. It can be professional, minimalistic, artistic… Pretty much any feeling or idea can be a theme for your website. So, before you add a background image, we would advise you to first decide on your theme. After that, you need to carefully consider which background will work best with your theme of choice. To get an idea of what we are talking about, visit websites that have a similar theme to yours, and see how their background fits.

In some cases, the background will be too obscure and modest compared to the rest of the theme, which will make it practically useless. Or it can go the other way, and draw attention away from the more important aspects of your website. Ideally, your background will compliment your theme and the two will work together in order to present your website properly.

Animated background images – yes or no?

While some websites do have terrific animated background images, it is usually a good idea to stray away from them. The only way to properly incorporate and animated image on your website is to be mindful of it while creating your website. Creative designers with a lot of experience are able to add animation to a website and make it look interesting, yet not overwhelming. Adding animation after the website is done is only going to bring confusion to your audience and possible performance issues to your website.

Add a background image in WordPress

Since there are a couple of ways to add a background image in WordPress, we are going to cover the most popular ones. These methods can differ in difficulty and in the level of image optimization. So, before you implement one, make sure that you’ve read through our entire article. That way you will make sure to pick the right one.

Using the WordPress theme settings

The most straightforward way for adding a background image to a WP website is through theme settings. Most WP themes come with custom background support which allows you to change your background with ease. So, if you have a WP theme installed, and it has custom background support, use it. If it doesn’t, then you will have to go through WP theme settings.

The first thing to do is to go to the Appearance -> Customize in WP admin panel. Doing so will open the WordPress theme customizer. Here you will go to the “Background image” option and click on the select image in the panel that shows up. Once you click on the button, you will be able to either upload a background image or choose one from your media library. Once you choose the image, you will get a preview of how it will look and you will get different options for display. You will be able to choose between:

• Fill screen.
• Fit screen.
• Repeat.
• Custom.

Once you are done with optimization click on the “Save & Publish” button. This will save your changes and add your background image.

Using a plugin to add a background image in WordPress

Strictly using WordPress to add background images is pretty straightforward. But it doesn’t allow for much flexibility. For that, your best option is to use a plugin. Background plugins will not only help you add an image but will also set different ones for various posts and pages. They will also automatically resize your image so that it properly fits the screens of different devices. The most popular plugins are:

• Full-Screen Background.
• Full Background Manager.
• Advanced WordPress Backgrounds.
• Simple Full-Screen Background.

For this article, we are going to focus on Full Screen Background Pro as it is among the most popular ones. Once you install and activate the plugin, you will have to go to the Appearance -> Full-Screen BG image. Once you input the necessary info for activation, you can head on to your WP website and start adding images.

First, head on to the plugin settings page and click on “Add new image”. Doing so will take you to the upload screen where you will be able to upload or select images. Once you choose an image, you will have to provide a name for it. After that, you will need to select where your image will be used as background. As you will see, there are a ton of options to choose from, as you can go from having a global background to specific blog posts. You can even choose to add multiple images and have your website shift them as a slide show. All in all, there is a ton to explore, and the beauty of Full Screen Background Pro is that it is quite intuitive. So, have at it.