In certain circumstances, and if done properly, a background image can make your website more engaging and captivating for your users.

Cloudways

Adding a fullscreen background image in WordPress is pretty easy, as you’ll see in this article.

Adding a background image in WordPress via Customize

Click here if you want to jump straight to the video tutorial.

Cloudways

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.

wordpress background image

Cloudways

3. Press the Select Image button to upload/choose the image for your background.

Select Background Image in WordPress

4. After the image was uploaded, choose “Fill Screen” as Preset and “Center” as Image Position.

WordPress Background settings

Cloudways

5. Click the Save & Publish button and that’s it.

 

Adding a background image in WordPress 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 a YouTube video as your background, a feature which the below plugin provides.

Update (6/18/2018): The below plugin is currently outdated. Try Simple Full Screen Background Image as an alternative.

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;

All-in-One Custom Backgrounds Lite

After you published the background group, go to Appearance -> Background Options, select your group and press Save Changes.

All-in-One Custom Backgrounds Lite options

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.

Guidelines

  1. High-quality – Make sure the image has a high-quality resolution, otherwise it can get blurry;
  2. 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;
  3. 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.