How to Add a Background Image to Your WordPress Website

>How to Add a Background Image to Your WordPress Website
  • How to Add a Background Image to Your WordPress Website

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

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

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
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
5.Click the Save & Publish button and that’s it.

Video Tutorial



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;

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.

By | 2018-02-17T16:46:34+00:00 August 1st, 2017|How to, Plugins|0 Comments

Leave A Comment