• Blog
  • How to Add a Background Image in WordPress

How to Add a Background Image in WordPress

Are you wondering how to add a background image to your WordPress website?

Background images can be used on a variety of different websites to make them more engaging and can enhance your site’s design.

We’ll walk you through step-by-step on how to add a background image to your WordPress site easily.

Table of Contents

1. Add a Background Image via WordPress Theme Settings

Most WordPress themes offer custom background support. This means you can easily change the background image on your WordPress site.

This is probably the simplest way to add a background, so if your WordPress theme supports this, you can continue with this method.

If your theme doesn’t offer this feature, we have plenty of other methods listed below for you to follow.

Navigate to Appearance > Customize in your WordPress admin dashboard. This will take you to the WordPress theme customizer. Here you can change your theme settings with a live preview to see your website’s changes.

change background image wordpress admin

Under the Colors & Backgrounds tab, you’ll see options to select background image, or change the background color and pattern. Locate the ‘Select Image‘ button and click it.

You’ll now see your WordPress media library where you can upload an image from your computer, or select an image from your media library to apply as your background image on your WordPress website.

Click on the image you want to set as your background image and press ‘Choose Image’ to continue. This will now close the media library and your selected image will be displayed in the preview section of the theme’s customizer.

You can further customize your background image by selecting ‘Options‘. Here you’ll see the option to position your image, repeat it (if it’s not large enough), and more.

2. Use a Plugin to Customize Background Image in WordPress

If your theme doesn’t allow you to customize the background image via the theme customizer, you can use a plugin which will work with any theme.

The Full Screen Background Pro plugin allows you to set backgrounds for any post, page, or any other part of your WordPress website.

All images will automatically be made full-screen and mobile responsive, which is very hard to achieve through the theme customizer.

First, install the Full Screen Background Pro plugin. Once it’s installed, activate the plugin.

Navigate to Appearance > Full Screen BG Image where you can configure the plugin settings.

This plugin is a premium plugin, and therefore isn’t free. When you navigate to the above location, you may be asked to enter your license key. This can be found in the email you received after purchasing the plugin.

Click on ‘Save Settings‘ to save your changes. Now you are ready to start adding background images to your WordPress pages, posts, and categories.

Select ‘Add Image‘ on the plugin’s settings page. Like we did it method one, select ‘Choose Image’ to launch the media library in WordPress.

You’ll need to add an image name, but this will only be displayed in the backend of WordPress, so name it something relevant to the image.

Choose where you want the image to be displayed:

  • Global
  • Category
  • Archives
  • Pages
  • Posts
  • Blog
  • Front Page
  • Search
  • 404
  • Login
Click ‘Save Image’ to save your new background image. You can add multiple images by going back to Appearance > Full Screen BG Image.
If you have selected more than one image, the plugin will display background images as a slideshow. You can adjust the slideshow settings via the ‘fadein effects’ option.

3. Add a Background Image via CSS Hero

CSS Hero is a WordPress plugin that makes it possible to change your WordPress website’s theme without any coding.

This is a perfect option for beginners who want more flexibility than the theme customizer offers, but may not be prepared for other more complicated methods.

Install and activate CSS Hero, then navigate to your homepage in your internet brwoser. At the top, you’ll see the option to ‘Customize with CSS Hero‘; click this link in your admin bar.

CSS Hero is a premium plugin, with plans starting from $19 per year. If you’re only customizing one site, you can choose the Starter option.

Once you’ve clicked the button in the admin bar, you’ll get the CSS Hero options. Hover your mouse over the area you want to change the background image on.

Choose the background link in the left sidebar then select ‘Image’. You can upload your own images or choose one from Unsplash, which is a free stock photo website.

When you’ve got the image you want to add as a background image to your WordPress website, select ‘Apply Image’. You can adjust the size of your image and more via the options.

If you’re ready to see your new background image in action, click ‘Save and Publish’. CSS Hero works with a variety of other plugins like Elementor, so be sure to check its compatibility for you purchase it.

4. Add a Background Image Using CSS

WordPress, by default, adds CSS classes to the different elements on your WordPress site. If you’re ready to experiment with CSS code, then this method might be best for you.

If you have a category on your WordPress site called ‘Reviews’, then CSS classes will automatically be added when this category page is viewed.

Navigate to a category page, right click your mouse, then select ‘Inspect’. You’ll be able to see the CSS classes which have been added by WordPress.

In this example, you can use category-reviews CSS class to style this category differently to any others on your WordPress site.

Add the following custom CSS to your theme, remembering to replace the category and background image to your own requirements.

1
2
3
4
5
6
7
body.category-reviews {
background-image: url("http://example.com/wp-content/uploads/2019/03/your-background-image.jpg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

5. Roundup

We hope this article has been useful in teaching you how to add a background image in WordPress. For more WordPress tutorials, visit our blog page and use the search function to find more WordPress guides!

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

Share

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

Follow

Top Hosts by Category

Top Recommended Web Hosts

Subscribe

For the latest authentic research and news on the best hosts for your website!

Next Post

Related Posts: