Wordpress Tutorials

How to Add a Background Image in WordPress – Short Course

By  | 

Adding background images to your WordPress website helps to make that pages/posts look more engaging and pleasant. In fact, it’s very easy to add a background image to your website posts/pages because most WordPress themes come with custom background-image support but you can also install a WordPress plugin that is specifically meant for creating background-images within posts/pages. So, in this article I will show how to easily add a background image to your WordPress posts/pages.

How to add background Image in WordPress

Method-1: Adding a background image using your WordPress theme-settings:

Most premium and free WordPress themes feature a custom background support which allows the website-owner to easily set background images within their posts/pages. So, if your WordPress-theme supports a custom background feature then consider using this method to add background images to your WordPress website. Below are the steps you will have to follow when adding background images within your posts or pages;

  1. Look for the WordPress theme customizer: the first thing you will need to-do is to log into your WordPress account and then go to the Dashboard >> Appearance >> Customize where you will be able to change different theme-settings while viewing a live-preview of the website as shown in the illustration below.

Look for the WordPress theme customizer

Below is an illustration of the customization-page and it’s from this section that you will able to make any changes to you website while having a live-preview.

 

  1. Click on “Background Image”: after locating the customization-area, click on the “Background Image” link and then you will be redirected to another panel that enables you to select and upload a background image for your website as shown in the illustrations below;

Below is an illustration of the background-image panel that will enable you to select and upload desired background-image onto to your WordPress website;

 

  1. Select your background image: after locating the background-image panel, click on the “Select Image” button and this will bring-up a WordPress media-uploader where you can select and upload image from your computer or can even select from the previously uploaded images in the media-library and then click on “Choose image” to set the selected image as shown in the illustrations below;

 

  1. Preview your background image: after choosing and uploading the image that you want to use in the background, close the media-uploader popup and you will see the background-image in form of preview in your theme customizer as shown in the illustrations below.

Note: below the set background-image you be able to see other image-option which will enable you to select how want the background-image to be displayed like; fill-screen, repeat, custom or fit-screen. You will also be able to select the position of the background-image by simply clicking on the arrows below or dragging the background-image itself in order to align it to the center, right or left position. Lastly, after making all the necessary changes, click on the “Save & Publish” button at the top-section and your background-image will be successfully added to the WordPress-website.

 

 

Method-2: Adding a custom background image to a wordpress-website using a Plugin:

Adding a custom background image to a wordpress-website using a Plugin

In case your WordPress-theme doesn’t support a custom background feature, then you can install a plugin that can allow you to set background-images. In fact, most plugins a very flexible and work well with any WordPress theme and will even enable you to set multiple background-images in different posts, pages and categories of your WordPress website. Lastly, plugins are very responsive whereby they make background-images desktop and mobile responsive which is a great thing. So, below are some of the steps you need to follow when installing, activating and using the “Full Screen Background-image” plugin.

 

  1. Search for a good background-image plugin: you will have to first search for a good background-image plugin by simply going to the Dashboard >> Plugins >> Add New and then you will be directed to a page that enables you to search for new plugins as shown in the illustration below.

Below is an illustration of the new window that opens up after clicking on “Add New” so that you can be able to search for the “Full Screen Background-images” plugins;

 

  1. Install and activate the “Full Screen Background image” plugin: when the Full Screen Background-image plugin appears in the search-results, click on the “Install” button in order to begin the installation-process and afterwards an activation-button will appear. so, click on the “Activate” button so that the” Full Screen Background-image” plugin gets activated and becomes ready for use as shown in the illustrations below;

 

Below is an illustration on how to activate your plugin after installation-process;

 

  1. Locate the “Full Screen BG Images” plugin within the Admin-menu: after activating the “Full Screen Background Images” plugin, you will now need to locate it by simply going to the Dashboard >> Appearance >> Full Screen BG Image in order to add a new background-image, as shown in the illustration below.
  2. Choose the background-image and category: afterwards, you will need to click on the “Choose Image” button in order to select and upload background image of your choice and then select the “Category” where you want your background image to appear as shown in the illustration below.

Choose the background-image and category

 

Below is an illustration on how to select the category where you want the background-image to appear;

Note: after selecting a preferred background-image and the category you want it to appear, click on “Save Options” in order to save-up all the changes made. Go to your website and then have a preview of your background-image. So, below is my simple preview on the background-image I created within my post.

Hope this short course on ”How to Add a Background Image in WordPress” has helped you. If yes please share it with friends using social buttons below. But if you still have a question, post it below in the comment section for quick support from our community.

Researcher and Blogger....at YOSAKI.com. I keep on testing different things until I get what works and what does not work.

There are no comments

Join the conversation

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