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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
You can use both
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.
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).