WordPress

How do I add a background image to WordPress?

This brief tutorial explains how to add a background image to WordPress sites.

After reading this tutorial, you will be able to easily add a background image to your site and change or update an existing one. I also added instructions to set a color background for posts, pages and widgets.

All steps in this tutorial include screenshots, making it easy for all WordPress users to follow them.

How to add a background image to WordPress:

You can find the Background option in some WordPress themes as part of the Appearance options. If that’s your case, then press Appearance and Background; otherwise, keep reading the next step.

If, in your case, the background option doesn’t show up under Appearance, don’t worry. Under Appearance, press the Customize option as shown in the screenshot below (Appearance>Customize).

In the customizing screen, select the Background or Background image in the right menu, as shown in the following image (This may vary depending on the theme).

Now you will see a button to add a background image; press the “Select Image” button as shown below.

You will be able to select any image from your media library. If the image you want is already in your media library, select it and press the Choose image button. If the image you want to set as the background is in your computer, keep reading below.

If the image you set as the background is in your computer, press the Upload files tab shown by the upper arrow. Then press the Select Files button and select the file from your computer. Once selected and uploaded, press the Choose image button.

The previous step will bring you back to the customizing screen; if you scroll down the Background option, you will see the following settings:

  • Preset: The Preset option allows you to choose between 4 background looks. The first one (Fill screen) will extend the image over all the background areas. The second option (Fit to screen) will adjust the image to the area size. The Repeat option will multiply your image to fill the background area, and the Custom option allows you to use the options below.
  • Image Position: This option is useful to move the background image in the desired direction. Normally the center is the best option. But if the image isn’t properly optimized for your site, you may want to move it to show the relevant part.
  • Image Size: This option also allows you to fill the screen or fit it to the screen.
  • Repeat Background Image: Another option is to multiply your picture to reach the area size.
  • Scroll with Page: You can use this option if you want your background to move down when you scroll down.

After defining your background settings, scroll up the menu and press the Publish button to set the selected image as background.

Now your background image must be updated successfully.

Change Background Color for Pages, Posts and Widgets in WordPress:

This section explains how to change the background color for pages, posts, and widgets using a plugin.

To begin, on the dashboard left menu, place the mouse cursor over Plugins and press the Add New option (Plugins>Add New).

Once in the plugins installation screen, in the keyword search field, type: “Change Background Color for Pages, Posts, Widgets”. When the plugin named Change Background Color for Pages, Posts, Widgets shows up, press the Install Now button as shown in the screenshot below.

Once installed, enable the plugin by pressing the Activate button as shown in the following image.

After installing it, you can find the plugin on the left dashboard menu, named as Background Color; press it.

The plugin configuration screen contains the following options:

  • Body Background Color for pages: Here, you can define a background color only for pages.
  • Content Background Color for pages: Here, you can define a background color for content only in pages.
  • Body Background Color for posts: Here, you can define a background color only for posts.
  • Content Background Color for posts: Here, you can define a background color for content only in posts.
  • Widgets Area Background Color: This option allows you to set a background color for widgets.

After configuring the plugin, press the Save Changes button to apply changes.

Now you can see how your site looks.

Conclusion:

As you can see, adding a background image to WordPress is an easy task any level user can do. This is among the easiest and most basic tips any web administrator must know. It is highly recommended to have the image optimized previous to uploading it to your site. Probably the highest value in this article is the instructions to modify the background in pages, posts, and widgets, which not all themes allow natively. Of course, there are plugin alternatives to the used in this tutorial; feel free to try any of them.

Thank you for reading this WordPress tutorial explaining how to add a background image to WordPress. Keep reading Linux Hint for more WordPress tips and tutorials.

About the author

David Adams

David Adams is a System Admin and writer that is focused on open source technologies, security software, and computer systems.