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 tutorial, we will therefore show you how to easily add a background image to your WordPress website.
We assume that you have already installed WordPress. If you haven't already done so, check out this How to Set Up a WordPress Blog in 7 Steps guide.
We remind you that the loading of many images on your blog or website, can reduce the loading time of the latter.
Find out here Why you need to start optimizing your WordPress blog with images
Method 1. Add background image using theme settings
Most free and premium WordPress themes come with a background image customization feature. This feature allows you to easily set a background image on your WordPress website.
If your WordPress theme supports a custom background feature, we recommend using this method to add a background image to your WordPress website. However, if your theme does not support custom background functionality, you can use other methods in this tutorial.
Discover also How to modify the layout of your WordPress blog
First you need to visit the " Appearance> Customize in your WordPress dashboard. This will launch the Customizer of WordPress theme where you can change various parameters of the latter while watching a preview in real time.
Then you need to click on the “Background Image” option. The panel slides out and shows you the options to upload or select a background image for your website.
Click on the button Select the image to continue.
This will display the WordPress Media Download pop-up window where you will be able to download an image from your computer. You will also be able to select a previously downloaded image from the media library.
Then you have to click on the button Choose image After downloading or selecting the image you want to use as a background.
This will close the pop-up, and you will see the preview of your selected image in the Customizer.
Below the image, you will also be able to see the background image options. Under preset you can select how you want to display the background image.
Also discover How to upload your bulk media on WordPress
You can also select the position of the background image by clicking on the arrows below. Clicking on the center will align the image to the center of the screen.
Do not forget to click on the button « Save and Publish At the top to save 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 set multiple background images. You can also set different backgrounds for any post, page, category or any other section of your website.
It gives the possibility to all your background images to be displayed in full screen and on mobile devices. 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 .
When activating, you must visit the " Appearance> FullScreen BG Image To configure the plugin settings.
You will need 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 button Save settings To store your changes. You are now ready to start adding background images to your website.
Go ahead and click on the button Add a new picture On the plugin's settings page. This will take you to the background download screen.
Click the " 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.
Then you must provide a name for this image. This name will be used internally, so you can define what you want.
Finally, you need to select where you want this image to be used as the background page. " Full Screen Background Pro »Allows you to configure the images as a background globally, or you can choose from different sections of your website, like categories, archives, first page, blog page, etc.
Do not forget to click on the button « Save image »
You can add as many images as you want by visiting the " Appearance> Full Screen BG Image ».
If you set more than one image to be used globally, the plugin will automatically start showing the background images as a slideshow.
You can adjust the time it takes for the image to disappear and the duration of the fade animation.
The time you enter here is in milliseconds. If you want the background image to disappear after 20 seconds, you must enter 20000.
Do not forget to click on the button « Save settings To store your changes.
Define the background image for individual posts, pages, categories, etc….
« Full Screen Background Pro »Also allows you to set background images for posts, pages, categories, tags, etc.
Just change the post / page where you want to display a different background image. On the post edit screen, you will notice the new “Background Image” box at the bottom of the post editor.
To use a background image for a specific category, you must visit the " Appearance> Full Screen BG Image », Then click on the button« Add a new picture ».
See in this article W3 Total Cache vs WP Super Cache: which one to choose?
After downloading your image, you must select "CategoryAs the context in which you want to display the background image.
Now enter the id or slug of the specific category where you want to display the image. Remember to save your image to store your settings.
If you are about to create a website for photographer or for any creative agency, check out our 3 WordPress themes premium optimized for this task.
1. Moose
Moose is a beautiful and sophisticated WordPress theme that allows you to customize virtually any website, and especially to give it a great look in full screen.
It comes with different menu combinations and layouts to get you started quickly, and if you need a head start, you'll be able to import one of its ten demos in minutes.
Its robust design and visual coupled with portfolio options, grid layouts and more make it a great place to display creative work. But frankly, it could just as well be perfect for any type of business website.
Download | Demo | Web hosting
2. Fotofly
This WordPress theme is ideal for the creation of any photographer website. With a layout thought to optimize the display of each of your captures, it will be perfect in the conversion of many visitors.
This WordPress theme is suitable for the easy creation of any photographer's website, thanks to the quality of its layouts. Its latest is ultra responsive and allow it to be viewed on any mobile device.
Discover 7 WordPress plugins to optimize the caching of your website
It comes with features such as: support for many widgets, sharing on social networks, logo customization, mega menu support, compatibility with several popular plugins, many tools dedicated to blogging, detailed documentation , multilingual support, image hovering effects, a powerful photo gallery, password support on this one and many more.
Download | Demo | Web hosting
3. Great Photography
Grand Photography is a WordPress theme dedicated to photography websites. It comes with the OneClick installation process that will allow you to create it easily and in minutes.
It integrates nearly 140 gallery and page templates to let you ideally display your work. Additional features like parallax scrolling, background video support, will let you use your creativity to create a visually stunning layout.
The advanced gallery editor will allow you to upload photos in bulk, then rearrange them with support for drag & drop functionality. You will also be able to protect your images with a password. It also has a personalized type of post dedicated to events that will allow you to create them and inform your visitors about the time, date, location where your exhibition will take place etc….
Download | Demo | Web hosting
Other recommended resources
See also these articles to go further
- How to configure the WordPress Slider Revolution plugin
- How to create a custom layout with Elementor
- How to create a Youtube account and add your videos to WordPress
Conclusion
Here is ! That's it for this tutorial, hope you can easily add background image to your blog or website. We also invite you to consult our resources if you are a beginner blogger. If you have any suggestions or remarks, they will be welcome.
We urge you to share this article on your different social networks.
...
