Different background images for each page in WordPress

Background image for each WP page

As you might know already, WordPress comes with a built in custom background option. However, not all themes decide to add support for this option so if you’re visiting the Customizer and don’t see a section called Background Image then there is no support for this feature in your theme.

Even if your theme decides to support this WordPress feature, you still can’t assign a different one for each of your pages without using a plugin or a bit of custom code. In this article I’m going to show you how to achieve this with just a bit of custom CSS.

Setting different background images for each WordPress page

First of all, it’s important to know that assigning an individual background image for each of your posts or pages can simply not be possible for the theme you’re using due to the fact that your theme might not reveal the body element at all.

That being said, let’s get started. First thing you need to do is figure out where you actually want to display your background image. Let’s say you have a page that needs an individual image – all you need to do is figure the ID for that specific page. If you’re not familiar with the technique for this, go ahead and read about finding the page ID in WordPress.

Now that you have found your page ID, it’s just a matter of navigating to Appearance > Customize > Additional CSS where you will add this code:

body.page-id-14 {
  background-image: url(http://path/to/your/image.jpg/);
  background-size: cover;
  background-repeat: no-repeat;

Adjust this code as needed and duplicate it as many times as you need for as many pages as you need. Finally, using this technique you can set different background images for any of your pages.

Subscribe for helpful tips and release info.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.