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:
- Go to Appearance -> Customize;
- Click on Background Image;
- Press the Select Image button to upload / choose the image for your background;
- After the image was uploaded, choose “Fill Screen” as Preset and “Center” as Image Position;
- 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.
Related article: How to install a WordPress plugin using 3 different methods.
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.
Note that you can’t use a background image on themes that use a full-width layout. You need a theme with a boxed layout.
- 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. It is generally recommended to add an image between 1400px and 1920px in width, and at least 800px in height. You should go for a size of 1600×800;
- 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 and also subscribe to our newsletter.
If you have any questions or thoughts, please drop a comment, contact us, or message us on Facebook.