Table of contents
Why?1: Use a page builder2: With custom CSS3: With the body_class filter (advanced users)4: With the WordPress Full Site Editor (block themes only)5: Custom page templateTroubleshooting Next stepsAdditional resources
Get the industry’s fastest hosting for WordPress◦ 100% network uptime
◦ Comprehensive security
◦ 24/7 support
Explore options

WordPress Guide → Build → Insert a Background Image

How to insert a background image in WordPress (only one page)

inserting a background image on one page

Want to give a single page on your site a unique look without changing your entire theme? Whether it’s a landing page, a contact page, or something seasonal, WordPress gives you a few easy ways to set a different background image for just one page.

You don’t need to be a developer, and you don’t need to install a new theme. Let’s walk through the most reliable options—from simple drag-and-drop plugins to a few cut-and-paste code tricks.

Get fast, reliable hosting for WordPress

Power your site with the industry’s fastest, most optimized WordPress hosting

WordPress.org hosting

Why use a different background image on one page?

Before we jump into the how-to, let’s talk about why you might want this kind of customization. Using a different background image on just one page can help you:

  • Draw attention to a landing page, promo, or sales event.
  • Set the mood or tone of a specific piece of content.
  • Highlight different sections of your site (like separating your About page from your blog).
  • Create a seasonal or temporary look without changing your entire theme.

Here’s how to make it happen …

Method 1: Use a page builder plugin (like Elementor)

If you want full design control without writing any code, a page builder is the easiest solution.

Here’s how to do it with Elementor:

  1. Install and activate Elementor from your WordPress dashboard.
  2. Go to Pages > All Pages, and click Edit with Elementor on the page you want to customize.
  3. In the Elementor panel, click the outermost section (or create a new one) that covers the whole page.
  4. In the left sidebar, open the Style tab.
  5. Under Background, choose Classic and upload or select your image.
  6. Adjust the Position, Attachment, Repeat, and Size settings to get the look you want.

You can also add overlays, control how the image behaves on scroll, or apply effects—all without touching your theme files.

Why use this method?

  • No coding required
  • Full visual control
  • Easy to preview and tweak

Method 2: Add a background image with custom CSS (using the page ID)

If you don’t want to use a page builder, you can apply a background image with a few lines of CSS. You’ll just need the page’s ID and the image URL.

Step 1: Find the page ID

  1. Go to Pages > All Pages in your WordPress dashboard.
  2. Hover over the title of the page you want to target.
  3. Look at your browser’s status bar or click to edit the page. You’ll see something like post=123 in the URL—the number is your page ID.

Step 2: Add your custom CSS

  1. Go to Appearance > Customize.
  2. Click on Additional CSS.
  3. Paste the following code, swapping in your image URL and page ID:

body.page-id-123 {
  background-image: url('https://yourdomain.com/wp-content/uploads/your-image.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

Optional tweaks:

  • Use background-attachment: fixed; for a parallax scroll effect.
  • Add an overlay with background-color and background-blend-mode.

This method works on any theme and won’t affect other pages.

Method 3: Use the body_class filter (advanced users)

If you prefer to use a custom class name instead of relying on a page ID, you can use the body_class filter to add a specific class to your page.

Step 1: Add a class to the page body in functions.php

In your child theme or custom theme, add this to functions.php:

function add_page_class_to_body( $classes ) {
  if ( is_page( 'Contact' ) ) { // Replace with your page title or slug
 $classes[] = 'contact-background';
  }
  return $classes;
}
add_filter( 'body_class', 'add_page_class_to_body' );

Step 2: Add your CSS

Now go to Appearance > Customize > Additional CSS and use:

body.contact-background {
  background-image: url('https://yourdomain.com/wp-content/uploads/contact-bg.jpg');
  background-size: cover;
  }

This method is flexible and makes your CSS easier to read, but it does require editing theme files.

Method 4: Use the WordPress Full Site Editor (block themes only)

If your theme supports Full Site Editing (like Twenty Twenty-Four), you can create a custom template directly in the editor.

How to use the Full Site Editor:

  1. Go to Appearance > Editor.
  2. Click Templates, then click the “+” button to create a new template.
  3. Choose Page and give your template a name.
  4. Add a Cover block or Group block, then upload your background image.
  5. Save the template.
  6. Go to the page you want to customize and assign your new template in the Page settings sidebar.

This method doesn’t use CSS. It works entirely within the block editor, which is perfect if you’re building your site with blocks and want a no-code solution.

Method 5: Create a custom page template (for advanced customization)

Steps to set it up:

This method is best if you’re already building a custom theme or working in a child theme.

  1. In your theme folder (via FTP or File Manager), duplicate page.php and rename it (e.g., page-background.php).
  2. At the top of the file, add this:
    <?php
    /*
    Template Name: Background Page
    */
    ?>
    Add inline CSS to your template file or enqueue a custom stylesheet.
  3. Save and upload the template.
  4. Go to your WordPress dashboard, edit the target page, and assign the new template from the Page Attributes section.

This method gives you full control over the layout and styling, but it’s best for developers or users comfortable working with PHP and WordPress theme files.

Troubleshooting background image issues

If your background image isn’t showing up or behaving as expected, here are some things to check.

Background image not showing?

  • Double-check the image URL—make sure it’s complete and correct.
  • Ensure your CSS selector is targeting the correct page or class.
  • Clear your site cache if you’re using a caching plugin.

Image only covers part of the page?

  • Use background-size: cover; to stretch the image to fill the background.
  • Make sure you’re targeting the body element or a full-width container.

Slow load times?

  • Compress your image using a tool like TinyPNG.
  • Avoid very large images unless necessary.
  • Use WebP format if your theme and browser support it.

Additional resources

How to build a WordPress site →

A complete beginner’s guide that covers 9 key steps to a successful launch

Website builders vs. WordPress →

With website builders and WordPress at your disposal, you don’t need to expend your energy or savings to build a website that suits your brand.

How to use WordPress Gutenberg blocks →

A complete beginner’s guide to Gutenberg blocks