Get the Official WPSaviour App Now!

Beginner’s GuideBlog

How to Add a Background Image in WordPress

Do you wish to add a background picture to your WordPress website? Background photos can be utilized to make your web site look extra participating and aesthetically nice. On this article, we are going to present you the best way to simply add a background picture to your WordPress website.

How to add a background image in WordPress

When you don’t just like the video or want extra directions, then proceed studying.

Methodology 1. Add a Background Picture Utilizing Your WordPress Theme Settings

Most free and premium WordPress themes include customized background assist. This characteristic means that you can simply set a background picture to your WordPress website.

In case your theme helps customized background characteristic, then we suggest utilizing this methodology so as to add a background picture to your WordPress website. Nevertheless, in case your theme doesn’t assist customized background characteristic, then you should use different strategies on this article.

First that you must go to the Look » Customise web page in your WordPress admin. This may launch the WordPress theme customizer the place you may change totally different theme settings whereas viewing a dwell preview of your web site.

Background image option in WordPress theme customizer

Subsequent, that you must click on on the ‘Background picture’ possibility. 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 on the choose picture button to proceed.

This may carry up the WordPress media uploader popup the place you may add a picture out of your pc. You may also choose a beforehand uploaded picture from media library.

Upload background image

Subsequent, that you must click on on the select picture button after importing or choosing the picture you wish to use as background.

This may shut the media uploader popup, and you will note your chosen picture’s preview within the theme customizer.

Background image settings

Beneath the picture additionally, you will be capable of see the background picture choices. Below preset, you may choose the way you need the background picture to be displayed: fill display, match display, repeat, or customized.

You may also choose background picture place by clicking on the arrows under. 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 high to retailer your settings. That’s all, you could have efficiently added a background picture to your WordPress website.

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

Methodology 2. Add Customized Background Picture in WordPress Utilizing Plugin

This methodology is much more versatile. It really works with any WordPress theme and means that you can set a number of background photos. You may also set totally different backgrounds for any put up, web page, class, or another part of your WordPress website.

It routinely makes all of your background photos to be full display and cellular responsive. This implies your background picture will routinely resize itself on smaller units.

First, that you must set up and activate the Full Display Background Professional plugin. For extra particulars, see our step-by-step information on how to install a WordPress plugin.

Upon activation, that you must go to Look » Full Display BG Picture web page to configure the plugin settings.

Full screen background

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

Subsequent, that you must click on on the save settings button to retailer your adjustments. You at the moment are prepared to begin including background photos to your WordPress website.

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

add new background image

Click on on the select picture button to add or choose a picture. As quickly as you choose the picture, it is possible for you to to see a dwell preview of the picture on display.

Subsequent, that you must present a reputation for this picture. This title can be used internally, so you should use something right here.

Lastly, that you must choose the place you need this picture for use because the background web page. Full Display Background Professional means that you can set photos as background globally, or you may select from totally different sections of your web site like classes, archives, entrance web page, weblog web page, and many others.

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

You possibly can add as many photos as you need by visiting Look » Full Display BG Picture web page.

When you set multiple picture for use globally, then the plugin will routinely begin displaying background photos as slideshow.

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

Background fade in and fade out settings

Time you enter right here is in milliseconds. If you need a background picture to fade out after 20 seconds, then you will want to enter 20000.

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

Setting Background Picture for Particular person Posts, Pages, Classes, and many others

Full Screen Background Pro additionally means that you can set background photos for single posts, pages, class, tag, and many others.

Simply edit the put up/web page the place you wish to show a special background picture. On the put up edit display, you’ll discover the brand new ‘Full Display Background Picture’ field under the put up editor.

Adding a background image for a single post or page

To make use of a background picture for a particular class, that you must go to Look » Full Display BG Picture web page after which click on on the ‘Add New Picture’ button.

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

Set background image for a specific category

Now enter the precise class ID or slug the place you wish to show the picture. See our information on the best way to discover class ID in WordPress.

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

Methodology 3. Add Customized Background Photographs Anyplace in WordPress Utilizing CSS

By default, WordPress provides a number of CSS lessons to totally different HTML components all through your WordPress website. You possibly can simply add customized background photos to particular person posts, classes, creator, and different pages utilizing these WordPress generated CSS classes.

For instance, You probably have a class in your web site referred to as TV, then WordPress will routinely add these CSS lessons to the physique tag when somebody views the TV class web page.

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

You should utilize the examine software to see precisely which CSS lessons are added by WordPress to the physique tag.

Use inspect tool to see classes added by WordPress

You should utilize both category-tv or category-4 CSS class to model simply this class web page in another way.

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

1
2
3
4
5
6
7
physique.category-television {
background-image: url("http://instance.com/wp-content/uploads/2017/03/your-background-image.jpg");
background-position: middle middle;
background-dimension: cowl;
background-repeat: no-repeat;
background-attachment: mounted;
}

Don’t overlook to interchange background picture URL and the class class with your personal class.

You may also add customized backgrounds to particular person posts and pages. WordPress provides a CSS class with the put up or web page ID within the physique tag. You should utilize the identical CSS code simply change .category-tv with the put up particular CSS class.

We hope this text helped you learn to add a background picture in WordPress. You might also wish to see our listing of extraordinarily helpful methods for the WordPress capabilities file.

Download The WPSaviour App Now

Related posts
Beginner’s GuideBlogShowcase

7 Best Shopify Alternatives in 2020 (Cheaper and More Powerful)

Beginner’s GuideBest WordPress PluginsBlog

14 Best AI Chatbots Software for Your Website (Comparison)

Beginner’s GuideBlogTips

Magento vs WooCommerce – Which one is Better? (Comparison)

Beginner’s GuideBlogTips

12 Best Calculator Plugins for Your WordPress Site

Sign up for our Newsletter and
stay informed

Leave a Reply

Your email address will not be published.

Fear Of Missing Out?

Sign up with your email address to receive WordPress tips and updates
SUBSCRIBE NOW
Terms and Conditions apply
close-link
Click Me