How To's

How to add a Background Image in WordPress?

Adding a full-screen background image in WordPress is easy. A background image can make your website more engaging and captivating for your users. In this article, you will learn how to add a background image to your WordPress site. Basically, there are three types of methods to add a background image in WordPress:

1. Add a background image using your WordPress theme settings

Most of the free and premium WordPress themes offer custom background support. If your theme supports custom background feature, then follow the steps given below:

First, go to appearance and click on customize page. Theme customizer page will open. Here, you can change different theme settings. Live preview on your website will let you understand changes. To customize, click on the background image.

customize background wordpress

The panel will show you the options to upload or select a background image for your website. Click on the “Select image” button to continue.

select background image wordpress

Next, you will see WordPress media uploader where you can upload an image from your computer. You can select a previously uploaded image from the media library.

upload image wordpress

Select or upload the image as per your requirement and click on “Choose image”. After that, media uploader popup will be closed and you will be able to see the selected image preview in the theme customizer.

background image image settings

You can select how you want the background image to be displayed: fill screen, fit screen, repeat or custom. Another way is to click on the arrows. For example, clicking on center will align the image to the center of the screen.

Once you are done with settings, click on “Save & Publish.” Go to your WordPress site and check out the background image.

2. Add a background image in WordPress using plugin

This method allows you to set multiple background images. You can set different backgrounds for any post, page, category or any other section of your WordPress site. The plugin makes your background image full screen and mobile responsive.

The very first step is to install and activate the Full Screen Background Pro. To configure the plugin settings, go to the appearance and click on “Full screen BG Image”.

full screen background image wordpress

In this tab, you are supposed to add license key. For license key, check the email you received after buying the plugin or go to your account on the plugin’s website. Click on the “Save settings” button to store your changes.

Now you can go to “Add new image” button on plugins’ settings page.

new background image wordpress

Click on the “Choose Image” button to upload or select an image. You will be able to see the live preview of the image on the screen. Next step is to give the name for the image. Once you have given the name, you will need to select where you want this image to be used as the background page. You can choose from options like category, archives, pages, front page etc.

Finally, click on the “Save image” button to save your background image. You can add as many images as you want. All you have to do is go to appearance and click on “Full Screen BG Image.”

You can add more than one image to display background images as the slideshow. The settings allow you to adjust the time for an image to fade out and the time after which new background image starts to fade in.

time fade in for background image wordpress

Here, the time is displayed in milliseconds. For example, if you want a background image fade out after 20 seconds, then you have to enter 20000 in time duration tab. After entering the time duration, click on “Save options.”

How to set a background image for individual posts, pages, and categories?

The first step is to edit the post or page you want to display a different background image. On the post edit screen “Full Screen Background Image” box will be available.

If you want to choose an image for the specific category then first go to appearance and click on “Full Screen BG Image”. “Add new Image” button will appear. Click on that. Once you are done with uploading the image, you can choose the category.

Next step is to specify category ID or slug where you want to display the image. At last, click on “Save Image” to save all your settings.

individual post background image

3. Add a background image in WordPress using CSS

WordPress adds several CSS classes to different HTML elements throughout your WordPress site. You can add background images using this WordPress generated CSS classes. Use inspect tool to know exactly which CSS classes are added by WordPress to the body tag.

inspect body classes background image

To add a custom background image to the archive page, you will need to add following custom CSS to your theme:

1

2

3

4

5

6

7

body.category-tv {

background-image: url(“http://example.com/wp-content/uploads/2017/03/your-background-image.jpg”);

background-position: center center;

background-size: cover;

background-repeat: no-repeat;

background-attachment: fixed;

}

Replace the URL with your own URL. You can use this code to put a background image in individual posts and pages. All you have to do is replace category class with post-specific CSS class.

All three methods are easy to add a background image on your WordPress website. You can choose the method as per your requirement.

Tags

Leave a Reply

Your email address will not be published. Required fields are marked *

Close