In certain circumstances, and if done properly, a background image can make your website more engaging and captivating for your users.
Adding a fullscreen background image in WordPress is pretty easy, like you’ll see in this article.
Adding a background image using WordPress’ Customize feature
If your theme supports custom backgrounds, then this will be a straightforward job. All you have to do is to:
1. Go to Appearance -> Customize.
2. Click on Background Image.
3. Press the Select Image button to upload / choose the image for your background.
4. After the image was uploaded, choose “Fill Screen” as Preset and “Center” as Image Position.
5.Click the Save & Publish button and that’s it.
Adding a background image using a plugin
If your WordPress theme doesn’t support a custom background feature, then you’ll have to use a plugin.
Using a plugin will also allow you to have more features and flexibility. For example, you can add different backgrounds in different areas: pages, posts, categories, etc. Or you can add an YouTube video as your background, a feature which the below plugin provides.
After searching quite a bit, the only free plugin I’ve found that’s tested with the current WordPress version (4.8) is All-in-One Custom Backgrounds Lite. It has some nice features.
After you install it, you have to set up a group by going to Appearance -> Background Group. There you have to:
- Add a group name;
- Select “Image” for Type;
- Choose your image;
- Select “Stretch” for Mode;
- Click the Publish button on the right;
After you published the background group, go to Appearance -> Background Options, select your group and press Save Changes.
That’s it! Your background image should appear now.
- High-quality – Make sure the image has a high-quality resolution, otherwise it can get blurry;
- Size – You need to choose an image size that will look well on a wide variety of screen sizes. The most common aspect ratio nowadays is 16:9, so a recommended image size would be 1920×1080, so you can cover well most widescreen monitors;
- Optimization – Images can burden the loading time, so they need to be as optimized as possible.
That’s a wrap
Hope you found the post useful and comprehensive.
Feel free to share it with your friends!
If you have any questions or thoughts, please drop a comment, contact us, or message us on Facebook.