WordPress Made Easy

How to Add Background Image in WordPress

Would you like to add a foundation picture to your WordPress site?

Foundation pictures can be utilized to make your site look seriously captivating and tastefully charming.

In this article, we will tell you the best way to effortlessly add a foundation picture to your WordPress site.

Strategy 1. Add a Background Image Using Your WordPress Theme Settings 

Most mainstream WordPress topics accompany custom foundation support. This element permits you to effectively set a foundation picture to your WordPress site.

On the off chance that your subject backings the custom foundation highlight, we prescribe utilizing this strategy to add a foundation picture to your WordPress site.

In any case, if your subject doesn’t uphold this element, or you don’t care for how it carries out foundation pictures, then, at that point you can attempt different alternatives referenced in our instructional exercise.

First you need to visit the Appearance » Customize page in your WordPress administrator. This will dispatch the WordPress subject customizer where you can change diverse topic settings while seeing a live see of your site.

WP- Themes-Custamizer

Then, you need to tap on the ‘Foundation picture’ choice. The board will slide in and show you the choices to transfer or choose a foundation picture for your site.


Snap on the select picture catch to proceed.

This will raise the WordPress media uploader spring up where you can transfer a picture from your PC. You can likewise choose a formerly transferred picture from the media library.

Select WP background image

Then, you need to tap on the pick picture button in the wake of transferring or choosing the picture you need to use as foundation.

This will close the media uploader spring up, and you will see your chose picture’s see in the subject customizer.


Underneath the picture, you can likewise see the foundation picture alternatives. Under ‘Preset,’ you can choose how you need the foundation picture to be shown: fill screen, fit screen, rehash, or custom.

You can likewise choose the foundation picture position by tapping on the bolts underneath. Tapping on focus will adjust the picture to the focal point of the screen.

Remember to tap on the ‘Save and Publish’ button at the top to store your settings. That is all, you have effectively added a foundation picture to your WordPress site.

Feel free to visit your site to see it in real life.

Strategy 2. Add a Custom Background Image in WordPress Using a Plugin 

This strategy is much more adaptable. It works with any WordPress subject and permits you to set numerous foundation pictures.

You can likewise set various foundations for any post, page, classification, or some other part of your WordPress site.

It consequently makes all your experience pictures full-screen and portable responsive. This implies your experience picture will naturally resize itself on more modest gadgets.

In the first place, you need to introduce and initiate the Full Screen Background Pro module. For additional subtleties, see our bit by bit guide on the best way to introduce a WordPress module.

Upon initiation, you need to visit Appearance » Full Screen BG Image to arrange the module settings.


You will be approached to add your permit key. You can get this data from the email you got in the wake of purchasing the module or from your record on the module’s site.

Then, you need to tap on the ‘Save Settings’ catch to store your changes. You are presently prepared to begin adding foundation pictures to your WordPress site.

Feel free to tap on the ‘Add New Image’ button on the module’s settings page. This will take you to the foundation picture transfer screen.

Select WP background image

Snap on the ‘Pick Image’ catch to transfer or choose a picture. When you select the picture, you will actually want to see a live see of the picture on your screen.

Then, you need to give a name to this picture. This name will be utilized inside, so you can utilize anything here.

At last, you need to choose where you need this picture to be utilized as the foundation page.

Full Screen Background Pro permits you to set pictures as a worldwide foundation, or you can look over changed areas of your site like classifications, chronicles, front or blog page.

Remember to tap on the save picture catch to save your experience picture.

You can add however many pictures as you need by visiting the Appearance » Full Screen BG Image page.

On the off chance that you set more than one picture to be utilized internationally, the module will consequently begin showing foundation pictures as a slideshow.

You can change the time it takes for a picture to become dim and the time after which another foundation picture begins to blur in.

WP background image Time management

The time you enter here is in milliseconds. Assuming you need a foundation picture to become dim following 20 seconds, then, at that point you should enter 20000.

Remember to tap on the save settings catch to store your changes.

Foundation Images for Posts, Pages, and Categories 

Full Screen Background Pro additionally permits you to set foundation pictures for single posts, pages, classes, labels, and that’s only the tip of the iceberg.

Simply alter the post/page where you need to show an alternate foundation picture. On the post alter screen, you will see the new ‘Full Screen Background Image’ box beneath the post editorial manager.

Add a background image for page or post

To utilize a foundation picture for a particular class, you need to visit the Appearance » Full Screen BG Image page and afterward click on the ‘Add New Image’ button.

In the wake of transferring your picture, you can choose ‘Class’ as the setting where you need to show the foundation picture.

Background image for special category

Presently enter the particular class ID or slug where you need to show the picture. See our aide on the best way to discover classification ID in WordPress.

Remember to save your picture to store your settings.

Strategy 3. Add Background Images utilizing CSS Hero 

CSS Hero is a WordPress module that permits you to roll out any improvements to your subject without contacting a solitary line of code.

You can add foundation pictures rapidly in a couple of straightforward advances. In the first place, you need to introduce and actuate CSS Hero. Whenever you’ve done that, it’s an ideal opportunity to begin tweaking your site.

Presently open up your landing page in your program. You’ll see the ‘Tweak with CS SHero’ interface in your administrator bar.

Background image in CSS Hero

After you click that connection, you’ll see the CSS Hero alternatives open up. Drift your mouse over the space you need to add a picture to.

In the screen capture beneath, you’ll see .header-channel inclination region. At the point when you click this region, you would then be able to pick the foundation interface in the left sidebar.

WP background image Selecter

The foundation connection will open. From that point, you can tap on ‘Picture.’ Now, you can pick a picture from Unsplash or from your transfers to make your experience.

Add background image with CSS

At the point when you click on the picture you need, you’ll see the ‘Apply Image’ button. Then, at that point you can pick what measure you need your picture to be. We picked the huge form so it would extend across the page.

Hit ‘Save and Publish’ at the base, and the foundation picture is presently put something aside for your site.

Custom background wordpress

Comments are closed.