How To Add Background Image On Your WordPress Posts And Pages

How To Add Background Image On Your WordPress Posts And PagesDo you want to add an extra beautifying element to your website? One way of doing this is to add a background image to your WordPress pages.

A background image is a picture or design that is placed behind the content of a page to beautify the page. And there are different ways of adding background images to WordPress websites.

In this guide, we will show you three ways to do this quite easily. But before that, let’s discuss some of the benefits of WordPress background images. Of course, if you simply want to learn “the how”, skip to that section.

Content:

    1. Why Add Background Image
    2. Cons of Adding Background Image
    3. How to Add Background Image 
    4. Conclusion

Why Add Background Image to WordPress

Simply put, they beautify your website. Having an image display on the background of your site adds some aesthetics and professionalism, as opposed to using a plain background throughout your site.

In the past, people tried to keep their website designs as simple as possible. While that worked well at the time, things have since changed. With the number of websites increasing globally, ensuring you stand out amongst the competition is important.

One way of achieving this is to improve your websites’ design. Using a background image does just that for your WordPress site.

Cons of Adding Background Image

As with everything that has advantages, there are also bound to be downsides if not used properly. Below we will discuss some of them.

Firstly, some background images may appear totally out of place and disrupt the content of your page. This would result in users missing the message you intend to deliver on your page.

Secondly, background images that are not mobile responsible may affect the mobile usability of your website. Most users access the internet from their mobile devices. And for this reason, mobile friendliness should be your primary concern as a website owner.

Lastly, if you are using an image with a large file size, this may increase the loading time of your website. Consequently, an increase in loading time can lead to high bounce rates, which in turn could affect your page SEO.

Of course, you can avoid this by using an image compressing plugin or simply compressing the image online before uploading it to your website.

How to Add Background Image on Your WordPress Posts and Pages

There are three ways to add a background image to WordPress sites. Those are either using the default theme option, with plugins or using custom CSS codes. Below, we will show you how to use each of them.

Default Theme Option

Some WordPress themes have support for using an image as the background of your pages. If your theme supports it, you can enable it from the customize page on your admin panel.

To start, login to your WordPress dashboard and then go to Appearance >> Customize. This will bring up the WordPress theme customizer page.

WordPress Theme Customizer Page

On the right, you will see a live preview of your site with the recent changes. The left panel contains the various customizations your theme provides. To set the background image, click on Background.

click on 'Background'.

On the “Background” menu, you can either use an image or colors for your background. To use an image, click on the Select Image button.

Select WordPress background image

Next, select an image from your WordPress media library. To upload a new image, select the “Upload files” tab. Then click on Select files and choose the image from your computer.

Select image for WordPress background

After uploading the image to your site, click on the Choose Image button.

edit image for wordpress background

To change the image size and display, click on the “Preset” dropdown and select from the options available. You can test each option to determine which works best with your image.

Publish WordPress background image

Under “Image Position”, you can choose the angle you want to align the image with. When you are done customizing the image, click on Publish to effect the changes.

You can visit any page on your website to see how the background looks.

Cons of Default Theme Background Option

The downside to using the default background option provided by most themes is that it does not provide a lot of flexibility and control over how the background images look on your pages.

Additionally, the background image is applied globally on your entire websites’ posts and pages. So if you want to use a different background for other pages and posts, you may find it difficult.

Fortunately, with WordPress plugins for adding background images, you get a lot of control and flexibility in adding a background photo to any section or page on your site.

Using WordPress Plugins

If your theme settings does not have an option to add a background image, you can use a plugin to add it. In this section, we will show how to do so using two plugins.

How to Add Background Image in WordPress Using Elementor

Elementor is one of the most popular drag and drop page builder plugins for WordPress. The plugin comes with a lot of features that let you build a complete website using an interactive dashboard without having to write a single line of code.

Elementor website builder

Here, we will use the Background feature to add a background image to sections on a WordPress website.

To start, you need to install and activate the Elementor plugin from your WordPress dashboard. Read our how to install WordPress plugins guide for help with this.

After activating the plugin, you can use the intuitive dashboard to edit your WordPress posts and pages.

To start, go to Pages >> All Pages and then select Edit below the page you want to modify.

Click 'Edit with elementor'

On the page editor, click on the Edit with Elementor button to open the dashboard.

The Elementor dashboard is packed with a lot of features to help you edit any section on your website. You can add texts, headings, images, videos, etc. from the “content” tab.

Say we want to add a background image to a section on your page, click on the six-dot icon to highlight the entire section as seen below.

click on the six-dot icon to highlight the entire section

On the “Style” tab, click on the Background dropdown. Next, select the pen icon and then click on Select Image.

On the “Style” tab, click on the Background dropdown

Now choose an image from your WordPress media library or upload a new image.

Adding Background Overlay

After selecting the image, you can add a background overlay so that the image doesn’t disrupt your content. For this, click on the Background Overlay dropdown.

click on the Background Overlay dropdown

Then select the color you want to use in the “Color” section.

select the color you want to use in the “Color” section

When you are done adding the image and effects, click on the Update button to save your changes.

With this method, you can add unlimited background images to any section or page of your website. Simply select the page, then edit with the Elementor plugin and add your background image.

Advanced WordPress Backgrounds (AWB)

Another plugin you can use to add background images in WordPress is the Advanced WordPress Backgrounds plugin.

Asides from adding background images, you can also use a video as your background element. The videos can be from your media library, YouTube, or Vimeo videos.

There are also special effects you can apply to your images such as Parallax scrolling effects. Here, we will focus on adding a background image, but if you want to learn more about background effects, check our detailed guide on adding parallax effects in WordPress.

To start, you need to install and activate the plugin from your WordPress dashboard. For this, go to Plugins >> Add New. On the search box, type “advanced WordPress backgrounds”. Next, hit the Install Now button and activate the plugin after the installation completes.

Install advanced WordPresss backgrounds

How to Use AWB Plugin

To use this plugin, go to Pages >> All Pages. Then select Edit below the page you wish to add the background.

Using the AWB plugin

On the editor, click on the Add Block icon, and then type ‘awb’ in the search box. When it appears, select the Background (AWB) block.

click on the Add Block icon, and type ‘awb’ in the search box

Next, select the type of background you want to add on the right side. You can use background colors, images, or videos. Select the “Image” tab and click on Select image.

Select the “Image” tab and click on Select image.

After that, choose an image from your media library.

choose an image from your media library.

You can change the size of the image and background using the “Size” and “Background size” options respectively.

After adding the image, click on the Update button to save your changes.

If you are using the Classic editor, navigate to the page or post you wish to add a background image.

Once there, click on the Advanced WordPress Backgrounds icon.

click on the Advanced WordPress Backgrounds icon

On the ‘General’ tab, click on the Background Type dropdown and then select the Image option.

Click on the Background Type dropdown and select the Image option.

Next, click on the Select Image button and then choose an image from your WordPress media library.

Select the WordPress background image

You can update the size of the image and the position as well. If you want to add an overlay, click on Select Color below “Overlay Color”. Next, choose the color you want to use.

Editing the wordPress background image

And now, click on Insert after customizing the background image.

click on Insert after customizing the WordPress background image.

This will generate a shortcode and automatically insert it into your editor. Within this shortcode, you can enter the text you wish to display on the background image.

Once done, hit the Publish/Update button to effect the change. Now you can view the page on your website to see how the background image looks.

Manually Add Background Image using CSS

If you are more technically inclined, you can use custom CSS codes to add custom backgrounds to your pages and posts.

Using custom CSS gives you a lot of flexibility and control over the appearance and placement of the images.

There are many background image placements available using the CSS method. First, we can create a global CSS background image that will show on all pages. Much like the option provided by some WordPress themes.

Alternatively, we can add category-specific background images, or create a CSS class with the background image. Then you can apply the class to individual posts and pages.

Note: This section requires basic knowledge of CSS and how CSS classes work. If you don’t have the experience, you can use the plugin method above.

To start, go to Appearance >> Customize from your WordPress dashboard. This will open the theme customizer menu.

Theme customizer menu: How to manually add WordPress background image

After that, select the Additional CSS menu.

select the Additional CSS menu.

On the “Additional CSS” box, copy and paste the code below.

body {

background-image: url("example-image.jpg");

background-size: cover;

background-repeat: no-repeat;

background-attachment: fixed;

}

Ensure you replace example-image.jpg with the URL to the image you want to use as your background image.

You can upload an image from your media library or use royalty-free images from stock image websites. Click on Publish once done.

Click Publish to publish WordPress background image

The code above will set a global background image for all the pages on your website. But you can use separate background images for categories, pages, and posts. Below we will show you how to do it.

How to Add Background Image in WordPress Pages

WordPress automatically creates separate classes for pages, posts, and other content types. To find this class, simply open a page from your website on the browser. Then right-click and select Inspect to open the Developer Options.

select inspect to open the Developer Options

On the <body> tag, you will see the list of classes for that page.

List of classes: WordPress background image

Usually, the class name should be ‘page’ but may differ depending on your WordPress theme.

After copying the class, head back to the ‘Additional CSS’ submenu under the Theme Customizer page.

Now copy and paste the code below into the box.

.page {

background-image: url("example-image.jpg");

background-size: cover;

background-repeat: no-repeat;

background-attachment: fixed;

}

Replace .page with the CSS class you got from the Developer Menu on your browser. Also, replace the background image URL with the link to an image from your WordPress media library.

Hit the Publish button once done.

Add Background Image on Posts

This works similarly to the pages we just set in the section above. Firstly, open a post from your website on the browser.

After that, open the Inspect tool and locate the class on the <body> tag of the page. In my case, it is ‘single-post’.

Adding wordpress Background Image on Post Pages

This class is used on all the posts on your website. So the customizations you apply will be global to your post pages.

To add a background image for posts, head back to the theme customizer page, then copy and paste the code below into the ‘Additional CSS’ box.

.single-post {

background-image: url("example-image.jpg");

background-size: cover;

background-repeat: no-repeat;

background-attachment: fixed;

}

Similarly, replace ‘single-post’ with the class you find on the developer option of your post page. Next, replace the background image URL with an actual link to the image you want to use.

Lastly, hit the Publish button to save your changes.

Adding Background Image to Category Pages

When you create a new category on your website, WordPress automatically assigns a CSS class for that specific category.

The class is in this format “category-category-name”, where category-name is the name of the category. So if the name of the category is ‘dogs’, the class WordPress creates will be ‘category-dogs’.

Here’s a practical use case for this. Let’s say you have a category about dogs, you can use an image of a dog in the background, which appears when users are viewing a list of posts in that category.

This can easily be added using the class created by WordPress for categories. On the Theme Customizer page, go to the Additional CSS option and then copy and paste the code below into the box.

.category-category-name {

background-image: url("example-image.jpg");

background-size: cover;

background-repeat: no-repeat;

background-attachment: fixed;

}

 

Replace ‘category-name’ with the name of the category you wish to add a background image to. Also, change the background-image url to the link for the image you intend to use. Once done, click on the Publish button to save the changes.

With this method, you can use a custom background image for all the categories on your website. Simply replace the CSS class with the name of the category and then add the URL to the image.

Conclusion

Depending on where you want to place the WordPress background image, one of the methods above will work on your site.

If you want to use a global background image across all pages on your site, you can use the option your WordPress theme provides.

But if you need more control and flexibility, using a WordPress plugin or custom CSS code will be your best option.

This guide has shown you different ways to add a background image on any page or section of your WordPress site.

For more WordPress tutorials, please check our blog with a vast collection of WordPress guides to help you manage your site effectively.