Monday, November 30, 2020
Home Blogging How to Add a Background Image in WordPress

How to Add a Background Image in WordPress

Do you need to add a background image to your WordPress web site?

Background photographs can be utilized to make your web site look extra participating and aesthetically nice.

In this text, we’ll present you the way to simply add a background picture to your WordPress web site.

How to add a background image in WordPress

If you’d want written directions, then please proceed studying.

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

Most well-liked WordPress themes include customized background assist. This function permits you to simply set a background picture to your WordPress web site.

If your theme helps the customized background function, then we advocate utilizing this methodology to add a background picture to your WordPress web site.

However, in case your theme doesn’t assist this function, otherwise you don’t like the way it implements background photographs, then you may strive the opposite choices talked about in our tutorial.

First you want to go to the Appearance » Customize web page in your WordPress admin. This will launch the WordPress theme customizer the place you may change completely different theme settings whereas viewing a reside preview of your web site.

Background image option in WordPress theme customizer

Next, you want to click on on the ‘Background image’ choice. The panel will slide in and present you the choices to add or choose a background picture in your web site.

Select background image

Click on the choose picture button to proceed.

This will carry up the WordPress media uploader pop-up the place you may add a picture out of your pc. You can even choose a beforehand uploaded picture from the media library.

Upload background image

Next, you want to click on on the select picture button after importing or choosing the picture you need to use as background.

This will shut the media uploader pop-up, and you will notice your chosen picture’s preview in the theme customizer.

Background image settings

Below the picture, additionally, you will give you the chance to see the background picture choices. Under ‘Preset,’ you may choose the way you need the background picture to be displayed: fill display, match display, repeat, or customized.

You can even choose the background picture place by clicking on the arrows beneath. Clicking on middle will align the picture to the middle of the display.

Don’t overlook to click on on the ‘Save & Publish’ button on the prime to retailer your settings. That’s all, you might have efficiently added a background picture to your WordPress web site.

Go forward and go to your web site to see it in motion.

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

This methodology is a lot extra versatile. It works with any WordPress theme and permits you to set a number of background photographs.

You can even set completely different backgrounds for any submit, web page, class, or another part of your WordPress web site.

It robotically makes all of your background photographs full-screen and mobile-responsive. This means your background picture will robotically resize itself on smaller units.

First, you want to set up and activate the Full Screen Background Pro plugin. For extra particulars, see our step-by-step information on how to set up a WordPress plugin.

Upon activation, you want to go to Appearance » Full Screen BG Image to configure the plugin settings.

Full screen background

You can be requested to add your license key. You can get this data from the e-mail you acquired after shopping for the plugin or out of your account on the plugin’s web site.

Next, you want to click on on the ‘Save Settings’ button to retailer your modifications. You are actually prepared to begin including background photographs to your WordPress web site.

Go forward and click on on the ‘Add New Image’ button on the plugin’s settings web page. This will take you to the background picture add display.

add new background image

Click on the ‘Choose Image’ button to add or choose a picture. As quickly as you choose the picture, it is possible for you to to see a reside preview of the picture in your display.

Next, you want to present a identify for this picture. This identify can be used internally, so you should utilize something right here.

Finally, you want to choose the place you need this picture to be used because the background web page.

Full Screen Background Pro permits you to set photographs as a world background, or you may select from completely different sections of your web site like classes, archives, entrance or weblog web page.

Don’t overlook to click on on the save picture button to save your background picture.

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

If you set a couple of picture to be used globally, then the plugin will robotically begin displaying background photographs as a slideshow.

You can regulate the time it takes for a picture to fade out and the time after which a new background picture begins to fade in.

Background fade in and fade out settings

The time you enter right here is in milliseconds. If you need a background picture to fade out after 20 seconds, then you have to to enter 20000.

Don’t overlook to click on on the save settings button to retailer your modifications.

You may see : How to Write Math Equations in WordPress

Background Images for Posts, Pages, and Categories

Full Screen Background Pro additionally permits you to set background photographs for single posts, pages, classes, tags, and extra.

Just edit the submit/web page the place you need to show a completely different background picture. On the submit edit display, you’ll discover the brand new ‘Full Screen Background Image’ field beneath the submit editor.

Adding a background image for a single post or page

To use a background picture for a particular class, you want to go to the Appearance » Full Screen BG Image web page after which click on on the ‘Add New Image’ button.

After importing your picture, you may choose ‘Category’ because the context the place you need to show the background picture.

Set background image for a specific category

Now enter the particular class ID or slug the place you need to show the picture. See our information on how to discover class ID in WordPress.

Don’t overlook to save your picture to retailer your settings.

Method 3. Add Background Images utilizing CSS Hero

CSS Hero is a WordPress plugin that enables you to make any modifications to your theme with out touching a single line of code.

You can add background photographs shortly in a few easy steps. First, you want to set up and activate CSS Hero. Once you’ve finished that, it’s time to begin customizing your web site.

Now open up your homepage in your browser. You’ll see the ‘Customize with CS SHero’ hyperlink in your admin bar.

Background Image with CSS Hero

After you click on that hyperlink, you’ll see the CSS Hero choices open up. Hover your mouse over the realm you need to add a picture to.

In the screenshot beneath, you’ll see .header-filter-gradient space. When you click on this space, you may then select the background hyperlink in the left sidebar.

WordPress background image selector

The background hyperlink will open. From there, you may click on on ‘Image.’ Now, you may select a picture from Unsplash or out of your uploads to create your background.

Add image to background with CSS Her

When you click on on the picture you need, you’ll see the ‘Apply Image’ button. Then you may select what dimension you need your picture to be. We selected the big model so it will stretch throughout the web page.

Hit ‘Save and Publish’ on the backside, and the background picture is now saved in your web site.

Custom background WordPress image

Method 4. Add Custom Background Images Anywhere in WordPress Using CSS Code

By default, WordPress provides a number of CSS courses to completely different HTML components all through your WordPress web site. You can simply add customized background photographs to particular person posts, classes, writer, and different pages utilizing these WordPress generated CSS courses.

For instance, If you might have a class in your web site referred to as TV, then WordPress will robotically add these CSS courses to the physique tag when somebody views the TV class web page.

<physique class="archive category category-tv category-4"> 

You can use the examine software to see precisely which CSS courses are added by WordPress to the physique tag.

Use inspect tool to see classes added by WordPress

You can use both category-tv or category-4 CSS class to type simply this class web page in another way.

Let’s add a customized background picture to a class archive web page. You will want to add this customized CSS to your theme.

1
2
3
4
5
6
7
body.category-tv {
background-image: url("http://example.com/wp-content/uploads/2017/03/your-background-image.jpg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

Don’t overlook to change background picture URL and the class class with your individual class.

You can even add customized backgrounds to particular person posts and pages. WordPress provides a CSS class with the submit or web page ID in the physique tag. You can use the identical CSS code simply change .category-tv with the submit particular CSS class.

We hope this text helped you learn the way to add a background picture in WordPress. You might also need to see our comparability of the finest drag & drop web page builder plugins for WordPress, and our tutorial on how to create a customized WordPress theme (with none code).

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -

Most Popular

How to Signup for Godaddy Affiliate Program & Start Making Money

GoDaddy is likely one of the well-liked model names out there of area and web-hosting. They are well-liked for a numerous cause, and so they...

How To Start Selling Website on Flippa: A Beginner’s Guide To Success

If you may have been working on-line for lengthy and into Website flipping, Flippa is one identify that you need to have heard of. Flippa is a...

How to Fix Your Connection is Not Private Error (Site Owners Guide)

Are you seeing ‘Your connection is not private’ error in your WordPress web site? This is the error message you’ll see on Google Chrome. The...

How to Fix the WordPress White Page of Death (Step by Step)

The WordPress white page of dying is one of the most widespread WordPress errors. It can also be one of the most irritating ones as...

Recent Comments