Do you want to add a background image to your WordPress website?
Background images can be used to make your website more attractive and aesthetically pleasing.
In this article, we'll show you how to easily add a background image to your WordPress website.
If you prefer the written instructions, then please continue reading.
Method 1. Add a background image using your WordPress theme settings
The Most Popular WordPress Themes come with custom background support. This feature allows you to easily set a background image on your WordPress website.
If your WordPress theme supports custom background functionality, we recommend using this method to add a background image to your website.
However, if your WordPress theme doesn't support this feature, or if you don't like the way it implements background images, then you can try the other options mentioned in our tutorial.
You must first visit the page Appearance »Customize in your WordPress admin. This will launch the Customizer WordPress theme where you can change different settings of this theme while viewing a real-time preview.
Then you have to click on the option 'Background image'. The panel will slide out and show you the options to upload or select a background image for your website.
Click the Select Image button to continue.
This will bring up a WordPress pop-up where you can upload an image from your computer. You will also be able to select an image previously downloaded from the media library.
Then you need to click on the Choose Image button after uploading or selecting the image you want to use in the background.
This will close the media uploader pop-up, and you will see the preview of your selected image in the WordPress theme customization.
Below the image you will also be able to see the background image options. Under " PresetYou can select how you want the background image to appear: fill screen, fit screen, repeat, or custom.
You can also select the background image position by clicking the arrows below. By clicking on the center, the image will align the image to the center of the screen.
Do not forget to click on the button « Publish To store your settings. That's it, you have successfully added a background image to your WordPress website.
Go ahead and visit your website to see it in action.
Method 2. Add a custom background image in WordPress using a plugin
This method is much more flexible. It works with any WordPress theme and allows you to configure multiple background images.
You can also set up different backgrounds for any post, page, category, or any other section of your WordPress website.
It automatically makes all your background images full screen and responsive. This means that your background image will automatically resize on smaller devices.
First of all, you need to install and activate the plugin Full Screen Background Pro. For more details, see our step-by-step guide on how to install a WordPress plugin.
After activation, you must visit the page Appearance »Full Screen BG Image to configure the plugin settings.
You will be asked to add your license key. You can get this information from the email you received after purchasing the plugin or from your account on the plugin's website.
Then you have to click on the 'Save Settings'to store your changes. You are now ready to start adding background images to your WordPress website.
Go ahead and click on the button Add New Image On the plugin's settings page. This will take you to the background image download screen.
Click on the button 'Choose Image'to download or select an image. As soon as you select the image, you will be able to see a real-time preview of the image on your screen.
Then you need to provide a name for this image. This name will be used internally, so you can use it anywhere.
Finally, you need to select where you want this image to be used as the background image.
Full Screen Background Pro also allows you to set up background images for the entire website, or you can choose from different sections of your website like categories, archives, homepage or blog.
Don't forget to save to store your background image.
You can add as many images as you want by visiting the page Appearence »Full Screen BG Image
If you define multiple images to be used globally, the plugin will display automatically background images as a slideshow.
You can adjust the time it takes for an image to disappear and the time after which a new background image appears.
The time you enter here is in milliseconds. If you want a background image to fade after 20 seconds, you will need to enter 20000.
Don't forget to click on the button Save Options to save your changes.
Background images for posts, pages and categories
Full Screen Background Pro also lets you set background images for posts, pages, categories, tags, and more.
Just edit the post / page where you want to display a different background image. On the article edit page, you will notice the new group " Full Screen Background Image »In the article editor.
To use a background image for a specific category, you need to visit the page Appearance »FullScreen Background Image, then click on the "Choose Image ».
After uploading your image, you can select "category" as the context where you want to display the background image.
Enter the ID of the specific Category or Slug where you want to display the image.
Remember to save your image to store your settings.
Method 3. Add custom background images anywhere in WordPress using CSS code
By default, WordPress adds multiple CSS classes to different HTML elements on your WordPress website. You can easily add custom background images to posts, categories, authors, and other pages using these WordPress generated CSS classes.
For example, if you have a category on your website called TV, WordPress will automatically add these CSS classes to the body tag when someone views the TV category page.
You can use inspection tool to see exactly which CSS classes are added by WordPress to the body tag.
You can use either CSS class to style this category page differently.
category-tvcategory-4
Let's add a custom background image to a category archive page. You will need to add this custom CSS to your WordPress theme.
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; }
You can also add custom backgrounds to individual posts and pages. WordPress adds a CSS class with the post or page ID in the body of the tag. You can use the same CSS code just replace .category-tv with the CSS class of a specific post.
Discover also some premium WordPress plugins
You can use other WordPress plugins to give a modern appearance and to optimize the handling of your blog or website.
We offer you here some premium WordPress plugins that will help you do that.
1. Easy Custom JS and CSS
Ce WordPress Plugin premium is a powerful CSS and JavaScript code editor that allows you to add them to any section of your website. It allows you to keep your customizations even after a major update to your WordPress theme. 
You have the option of limiting the field of use of your personalized code. For example, you can use your code only for an article in the video format.
See our articles on How to require acceptance of the terms of use on WordPress
Or you can limit your code to a specific WordPress theme; Which is handy if you are currently changing themes for your WordPress blog.
Download | Demo | Web hosting
2. Yellow Pencil: Visual CSS Style Editor
Yellow Pencil is a visual style editor that you can use with any theme to personalize your website in minutes (fonts, colors, animations and more…).
Ce WordPress Plugin premium will create CSS styles by background while you play with the colors as if it were a game. It was designed for beginners as well as experienced users.
Discover also our 5 plugins WordPress to show notifications
No coding knowledge is required. However, the WordPress Plugin has a good CSS editor for those who like to code. You can code live with this editor and customize your CSS.
Download | Demo | Web hosting
3. Facebook Recent Comments Widget
This widget allows you to display a list of the latest Facebook comments from your WordPress blog on the first page, or anywhere there is a widget used by the website.
As features you will have among others: the display of all the latest comments of your website or WordPress blog, theAutomatic or manual approval of comments to be displayed on the widget,sending an email notification when a person comments through the Facebook comments plugin, good SEO, compatibility with any WordPress theme, ooptions to customize the widget and much more.
Download | Demo | Web hosting
Recommended Resources
Find out about other recommended resources to help you build and manage your website.
- How to hide a WordPress widget on mobile
- 10 WordPress plugins to improve the visual of your website
- How to Manually Migrate a WordPress Website: The Guide
- 7 WordPress plugins for call-to-action buttons on WordPress
Conclusion
Here ! That's it for this tutorial. We hope this article has helped you learn how to add a background image in WordPress. Do not hesitate to share with your friends on your favorite social networks.
However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on WordPress blog creation.
If you have suggestions or remarks, leave them in our section Comments.
...
