in

How to Add a Background Image to WordPress?

How to Add a Background Image to WordPress?

Images play a vital role on every website as they act as a supporting element to the content. They look appealing and attract a lot of users. The use of images in a website has become significantly popular, especially the full-screen background images.

Many of the businesses are using their logo as their background image that looks more professional and appealing as well. If you are wondering about the process of adding these images, then below we mention the different methods of doing the same.

Method 1 – Theme Customizer

The first method is one of the simplest ones and can be done without the knowledge of website coding. Before you begin with this method, you need to make sure that your current theme supports custom background feature.

Step 1

The first thing you need to do is head over to your WordPress admin dashboard, and head over to Appearance > Customise page. Here you need to click on the Background Image option which will be available on the left side of the screen.

Step 2

This will open the Background Image section where you need to hit the Select Image button. Once you click on the button, the WordPress will open the media uploader popup where you need to click on the Upload Media tab and browse the image which you want to upload.

Step 3

As soon as the uploading process completes, the WordPress live previewer will show that how the image will look on your website. If you are satisfied with the image, then you can click on the Save and Publish button. If you are not satisfied, then you can make certain modifications in the placement of the image and place it as per your requirements. When you are done, make sure to press the Save button or else your changes will not be saved.

This was the complete procedure of adding a background image via the theme customizer. However, if your theme doesn’t support this feature, then you need to follow the other methods.

Method 2 – Custom CSS

The other method of adding a background image is by injecting a custom CSS code into the theme files.

Step 1

To add a custom CSS to your website, you need to navigate to the WordPress admin dashboard and head over to the Themes > Customise page. Once you open the theme customizer, you need to click on the Additional CSS option from the left side menu.

Step 2

The WordPress will now open a dialogue box where you need to paste the following code.

body.category-your category {

background-image: url(“http://yourdomain.com/wp-content/uploads/2018/01/your-background-image-URL.jpg”);

background-position: center center;

background-size: cover;

background-repeat: no-repeat;

background-attachment: fixed;

}

You need to make sure that you enter your category name and the URL of your image. If the CSS code is valid, then the live previewer will show you how the image will look like on your website. You can also add this image to some specific posts. All you need to do is change the body.category to the post CSS class, and the image will be added to the post of your choice.

If you don’t want to add this CSS code using the manual method, then there is a plugin named as Simple Custom CSS that you can use for the same. All you have to do is install and activate the plugin and paste the code into the box. Make sure to click on the Update Custom CSS button to save the changes.

Method 3 – Plugin Method

WordPress comes with tons of plugins to choose from, and there is a plugin to add custom background image as well. You can use this method if you theme doesn’t support custom background or you don’t want to go with the CSS method.

Step 1

The first thing you need to do is log in to your WordPress admin dashboard, and head over to the Plugins > Add New page. Now, you need to download the Full Screen Background Images Pro plugin to your local system. After downloading, you need to click on the Add New button and install the plugin by uploading it to your site. Once the installation complete, you need to click on the Activate Plugin link to start using it.

Step 2

Once you have successfully activated the plugin, you need to head back to your WordPress admin dashboard and open the Appearance > Full-Screen BG Image page. The first thing you need to provide to this plugin is the license key which you can obtain from the plugin’s website.

Step 3

Now that you have authenticated the plugin, you need to click on the Add New Image button and upload the image which you want as your background. Afterwards, you need to enter a name of the image and select the page where you want to set it as background. You set this image for every page of your website, or you can choose from certain categories, blog pages, and any other page.

If you want to set the background image for any specific category, then all you need to do is head over to the plugin settings page and upload the image. After uploading the image, you need to select the Category option from the context drop-down menu. Paste the category ID in the next option and press the Save Image button.

This plugin also has a slideshow feature which automatically changes the background image after a specific time. All you need to do is upload multiple images as background and set the time of transition, and the plugin will do all the work for you. Make sure to save all the changes after customising the plugin as per your needs.

Endnote

With the processes mentioned above, you can easily add a background image to your WordPress website. The easiest method is via the theme customizer, but you need to make sure that your theme supports that feature. If your theme doesn’t support this feature, then you can use any of the other alternatives easily.

Leave a Reply

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

How to Display Ad Blocks in Specific Posts in WordPress?

How to Display Ad Blocks in Specific Posts in WordPress?

How to Add an Author’s Photo in WordPress?

How to Add an Author’s Photo in WordPress?