Add a Custom Background Image to Specific Pages in WordPress

Sometimes, you may want certain pages on your WordPress site to have a unique background image that reflects the content or purpose of that page. By adding custom CSS and a bit of PHP code, you can target specific pages to display unique background images. Follow these steps to easily add custom backgrounds to individual pages in WordPress.

Find the Page ID

Each page in WordPress has a unique ID. To apply a background image to a specific page, you’ll need to find its page ID.

Go to Pages > All Pages in the WordPress dashboard.
Hover over the page title and look at the URL at the bottom of your browser. You’ll see something like post=123.
Make note of the page ID (in this case, 123).

Add Custom CSS for the Background Image

Once you have the page ID, you can use CSS to add a custom background image. You’ll add the CSS code to your theme’s style.css file or via Appearance > Customize > Additional CSS.

Replace PAGE_ID with the actual page ID and IMAGE_URL with the URL of your background image:

Example:

This code will apply a full-screen background image to the specific page, ensuring it covers the entire background and stays centered.

Use PHP to Dynamically Add Background Images to Multiple Pages (Optional)

If you have multiple pages that need unique background images, you can simplify the process by adding some PHP code to your theme’s functions.php file. This will let you define background images directly in the code based on the page ID.

Add the following code to your functions.phpfile:

function custom_page_background() {

if ( is_page(123) ) { // Page ID 123

echo '<style>

body.page-id-123 {

background-image: url("https://example.com/wp-content/uploads/background1.jpg");

background-size: cover;

background-position: center;

background-repeat: no-repeat;

}

</style>';

} elseif ( is_page(456) ) { // Page ID 456

echo '<style>

body.page-id-456 {

background-image: url("https://example.com/wp-content/uploads/background2.jpg");

background-size: cover;

background-position: center;

background-repeat: no-repeat;

}

</style>';

}

}

add_action('wp_head', 'custom_page_background');

Replace 123 and 456 with your own page IDs, and update the image URLs to your own image paths. This code will dynamically apply different background images to each specified page ID.

Test Your Backgrounds

Visit the pages you’ve targeted to ensure the background images are displaying correctly. Make adjustments as necessary, especially to the background-size and background-position values, to get the best visual effect.