How to Add a Background Image in WordPress

We all love adding a background image to make things look more appealing. Even on your Mobile phones and our desktops, we add a background image as we like. Since in the world of customization there is nothing more appealing than a background image. On our mobile phones, we even have an option to add a video wallpaper. That brings us to WordPress, if you are already using it, then you should know how to Add a Background Image in WordPress?

Like our previous guides, this will be an easy guide to follow. Still, if you have any problems while following it, let us know in the comments section below. There are a couple of ways to do that! Some themes have such an option built-in and for some, you’ll need a plugin. You can also use CSS codes for that, so follow the whole guide and see which option suits you the best. Moreover, you can also add separate backgrounds for posts, pages etc. Without further ado, let us continue.

Add a Background Image Using Your WordPress Theme Settings

Almost all the popular WP themes come with custom background support. This feature allows you to easily add any image to the background without much effort. However, if you are new to WP, then this guide will help you get through this. But still, if you don’t like this method, you can follow the ones mentioned below, but this is the easiest method you can find.

Also, if your theme has no such feature then Yes! you should follow the ones mentioned below. But first, let’s check whether your theme supports this or not. For that, you need to visit the Appearance > Customize page in your WordPress admin. Here you can mess with the look of your theme with a live preview. That way you can instantly redo something that you don’t like. Or it is breaking your site like a monster, cuz trust me it happens

Locate and select the Background Image option. Then click on the Select Image option, here you can choose to upload the image you want.

There will be lots of options available by WP itself, you can choose one among them as well. Upload an image and click on Choose image at the bottom.

After that, you’ll see the image on the theme preview. Make changes as you want to get the perfect image location. Beneath the background image option, you’ll see the Preset option: fill screen, fit screen, repeat, or custom. Re-align the image as you like and then click the Save & Publish button to finish the job.

Add a Custom Background Image in WordPress Using a Plugin

Now, this method is more versatile since it works with every theme. You don’t have to explore your theme to check for the Background Image option. All you need is to install this plugin and it will do the rest of the job. Also, you can choose to set individual images as you like. A different image for posts, pages etc.

Also see: How to Recover a Lost Password in WordPress

The best part is that you don’t have to change settings for Mobile or for optimization. The wallpaper will be set automatically for your mobile or for your desktop theme. That means your background will resize itself automatically for mobile devices. Let’s get started.

First of all, you need to install a plugin called Full Screen Background Pro. Activate the plugin, then visit Appearance > Full Screen BG Image to configure the plugin settings. Since this is a pro version, you’ll need to activate the plugin. In the e-mail you’ll provide while purchasing, you’ll see the license key there. Get the key and activate the plugin to start working.

Once done, click on save settings to keep the plugin as you like it. Now click on the Add New Image button and that’ll take you to the new page.

Click on Choose Image and select the image you want to upload. On the Live preview screen, you are also to provide a name for the image. That way you can always recognize where you used that image. Finally, choose where you want to show this image.

This plugin allows you to set the image as a global background, or you can choose from different sections: posts, categories, pages, etc.

Click the Save button after you are done with all this. You can add as many images as you want by following the steps above. This is where this plugin is the best when it comes to setting a background. Then you have faded in and fade out options to make it more interesting when the background is changing.

Just don’t forget to save the changes to get the work done.

Add Background Images using CSS Hero

There are certain changes that need to be done within the code of the theme. However, those who are not familiar with the coding shouldn’t be messing with it. So, we have plugins for this, one of them is called CSS Hero, which lets you change the code of the theme without even touching it. So let’s download and activate the CSS Hero Plugin.

Now open your Homepage and you’ll Customize with CS SHero in the admin bar. Click on that and then you just need to hover your mouse to where you want the image to be.

Click that area and you’ll see the background link in the left sidebar.

Open that link and click on Add image, choose an image or upload one. Then click the Apply Image, choose the size of the image and then click Save and Publish. the background image is now saved.

Leave a comment

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