background images to your website
WordPress WordPress Tutorials

How to Add a Background Image in WordPress

Your website needs to be revamped if you wish to engage some more traffic. It is most probable that the website on which your work is hosted by is WordPress software, that’s why you are here. We are going to demonstrate how you can give a face-lift to your website and make most of this outstanding website designing software.

WordPress is wonderful web software which is best suited to do SEO, but that’s not all it is providing you. You can do wonderful things with this CMS; all you need is just a little creativity. Here we are going to focus on how to include some neat background images to your website.

We can give you word, this approach will surely make your website look superior to any other ordinary website.

How to add background images?

We have broken down the methodology of these editing tools into two parts, i.e. Technique 1 and Technique 2. Both of them are quite simple and user-friendly but only a bit different. Without wasting time any further, here we go.

Technique 1: WordPress Theme setting system

If you have purchased a premium WordPress theme, that’s great, you will be getting a lot of unique pictures, along with many customization tools.

However, if you are on a free version of theme settings, no problem at all, you can still enjoy a great variety of wallpapers and add-ons as they are equally great and freely disseminated by developers for your experience.

In either case, you will have to follow the steps given below to set up your new cover to your website:

  • Login to the WordPress website from your admin account to go to the dashboard.
  • Select the ‘Appearance’ settings tab on the left side of your screen.background images to your website
  • Click the ‘Customize’ option and there comes the widget to do all these stuff.
  • Next, you will have to select the ‘Background/Image’ option under Customize tab. background images to your website
  • After clicking the background option you will see a panel on the right side of your screen to select an image or upload any picture.
  • Click ‘Select Image’ button, and it will take you to a pop up where you can not only upload a new picture but also use the picture that you had uploaded once.
  • On the right side of the media pop up, there will be many options like; you can give the title of the image for your personal use (it will now show on the website), the caption to show it up on the website, etc.
  • Once you have selected/uploaded the picture and are done with all the options, click on the ‘Choose Image’ button.
  • As soon as you choose the image, the popup vanishes and you will be getting a preview of the image along with the theme customizer.
  • If you accidentally chose the wrong image you can still change it with the help of the button ‘Remove/Change Image’ under the preview.
  • Below the short preview of the image, you will need to choose how to present the image on your website i.e. ‘Fit to Screen, Fill Screen, Repeat or Custom’
  • There is another great customization option below the preview of the image such as, several arrows by which you can adjust the image as per your taste.
  • Finally, click on the ‘Save and publish’ button to make all things happen.

You can do these changes as many times as you need. And most of the options will be available in the free version too. Isn’t it amazing?

Technique 2: Adding a background image using a plugin

This is the pro version of editing your background. Here, you will be getting a lot of newer wallpapers accompanied by all new customization options. It is much flexible than the previous one. All you need to do is to purchase a good quality plugin; however, there are various free plugins available too, if you don’t wish to spend money.

The features in this technique depend on the plugin you use. In a good quality plugin, you will be getting a lot of options to customize the different background for different page/tab on the same website. Not only this, you can also define the animations/effects by which the image will welcome any visitor to the website.

What makes plugin background customization different from the former one is that it is a desktop as well as mobile browser friendly. The background image adjusts itself according to the size of a computer screen, or a mobile phone.

Here is the way how it works:

  • First of all, you need to install a perfect plugin according to your need. For this, get back to the dashboard and select the ‘Plugin’ tab. background images to your website
  • Click on ‘Add new’ and search for your favorite plugin. Once installed, don’t forget to activate it using the license sent to your e-mail.
  • When you successfully activate your plugins, go to the ‘Appearance’ and then select your plugin.
  • Click ‘Add new images’ and select the image you want to add by going through ‘Choose image’ bar.
  • On the next tab, you can name your image and select the context at which you want to display this image.
  • The context has a few options that enable you to put that background at the exact place where you want. Usually, the options are as follows:
    • Global- the image will be shown everywhere
    • Category- it will show the image at a particular page
    • Archive- background will show only at archive page
    • Pages- it will show on all pages
    • Posts- you can set this option to show the background for a particular post
    • Blogs- only for blog posts
    • Front Page- the background will work on homepage only
    • Search- the search result will be shown in the newer background
  • Select any of the above options and click ‘Save Image’ button to execute the work completely.

Another important fact needs to be considering is that, if you wish to add any image to a particular post you will need to add a slug in the above option- ‘Posts’.

Where do I get a slug?

It’s very easy to find out a slug. Before doing all those steps, go to a particular page and copy the slug from right next to the permalink bar, and paste it wherever you want to place your background. Here is an example of a slug ‘the-golden-bird’.

background images to your website

Besides, in the plugins, you may get wonderful options to enhance your background such as fade in effect where you can add an amusing animation too.

We hope the above text will surely help you heighten your website and you will be welcoming your visitors with new soothing colorful backgrounds.

Leave a Reply

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