Wednesday, October 27, 2021

Set Background Image for Your WordPress Website

Each image or video you use on your website defines your brand for your audience. So, background images on your website are important and you should design or choose them keeping in view you brand style and target audience.

In this tutorial, you'll learn a number of ways to set a background image on your WordPress website. I'll take you through the process of setting your WordPress background image in detail so that you can easily do it yourself.

Whether you are hosting your WordPress site with WordPress.com or are using a self-managed server, this tutorial is for you. You'll learn the following methods of setting a background image for your WordPress website:

add a background image with WordPress theme settings
add a background image using WordPress plugins
add background photos using CSS

Option 1. Add a Background Image with WordPress Theme Settings

Many free WordPress themes let you set a background image. I am using the Twenty Twenty-One theme which is a simple go-to theme for blogs, portfolio, and small businesses. This theme also allows you to have a background image.

Sign into the admin section of your WordPress site. You can handle most of your WordPress settings from here.

WordPress

How to Login to Your WordPress Site Admin Dashboard

Adi Purdila

Click Appearance which holds all the settings for how your website looks. You'll be asked to chose a theme. Choose Twenty Twenty-One as you theme (or any other theme that allows you to have a background image).

Now, hover over the Appearance menu and click Background. The theme Customizer window will appear and let you chose a background image.

Now, Select Image and either choose an image from your WordPress Library or upload an image.

You can set the details of your background image like alt text, title, caption, and descriptions. If your focus is SEO, it is always a great idea to add alt text. details of background image

Once you save the settings and choose the image, your WordPress background image will change. Now, you can explore the different Preset options (Fill Screen, Fit to Screen, etc.) to explore which will allow you make your background image look exactly how you want it.

Remember to click on the Save Changes button in the top left or your changes will not be saved.

Option 2. Add a Background Image Using WordPress Plugins

Using plugins to make changes in the appearance of your website is only recommended if you have a self-manage WordPress site, or if you have invested in a paid plan from WordPress.com. If you choose to use plugins with your free WordPress.com account, your domain will change from .wordpress.com to .wpcomstaging.com which is not ideal.

Plugins offer a lot of features and functionality to your WordPress site. For instance, with a background plugin you can add different backgrounds in multiple areas of your website: posts, pages, and categories. You can also set a YouTube video as your background with one plugin. Plugins can also resize your images and videos for phones so that your audience can easily enjoy your website from their phones.

For this tutorial, we are using a very basic free plugin. It is called the Simple Full Screen Background Image plugin.

Once you activate the plugin, hover your mouse over Appearance. Now, click the new option, Fullscreen BG Image.

Then, click Choose Image and upload the image you want as your WordPress background image. You can also choose an image from your Media Library if you have previously added your preferred background image there.

You can add the details like alt text, caption, and description of the image if you wish. Click Use Image and then, Save Options.

Now, head to your website to see how your WordPress background image looks.

Option 3. Add Background Photos using CSS

Again, to add a background image using CSS, you will have to have a self-hosted WordPress site, or subscribe to a paid plan on WordPress.com. Custom CSS will not only allow you to add a background image, but you can also make various changes in the appearance of your website to make it look exactly how you want.

Navigate on the WordPress dashboard and click on Appearance > Additional CSS.

Now, add these lines of code in the CSS field to set a WordPress background image.

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

Replace http://theimageurl with the URL of the image you want to use as your WordPress background image.

You can also add custom backgrounds and images to the individual posts on your WordPress website. To do that, you will need this code:

body.category-slug {
    background-image: url("http://anotherimageurl");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

Just like before, you will have to replace http://anotheimageurl with the URL of the image you want to use. You will also have to replace slug with the name of an existing category on your site.

Once you are done making the changes in CSS, don’t forget to click on the Save Changes button to store all the modifications. Now you can visit your site to view the new background image!

Pay Attention to the Image Size

Before you upload any image to your WordPress site, focus on its size. It's tempting to add a high-quality visual. However, this could increase the loading speed of your website. It does not sound like a big deal; however, the slower your site is, the greater the bounce rate, meaning more people leave your website before reading or seeing its contents. This, in turn, affects your conversions. Google has said that two seconds is the ideal site speed especially if you are business.

However, on the other hand, adding poor quality images just for the sake of having a smaller size can also impact the user experience negatively. So, the ideal practice is to keep a balance and add good quality pictures but only when necessary—that is when they are adding value to your content, and only to the resolution needed.

Summary

In this tutorial, I showed you three ways of setting WordPress background image.

adding a background image through he theme appearance settings
using a plugin to add the background image
adding custom CSS

You might or might not need a background image for your WordPress website. However, if you choose to have a background image, know that it is a significant element that sets your brand style for your audience. So make sure your WordPress background image reflects your brand image.

$99 Websites + Website Design