◦ Comprehensive security
◦ 24/7 support
WordPress Guide → Build → Insert a Background Image
How to insert a background image in WordPress (only 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
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:
- Install and activate Elementor from your WordPress dashboard.
- Go to Pages > All Pages, and click Edit with Elementor on the page you want to customize.
- In the Elementor panel, click the outermost section (or create a new one) that covers the whole page.
- In the left sidebar, open the Style tab.
- Under Background, choose Classic and upload or select your image.
- 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
- Go to Pages > All Pages in your WordPress dashboard.
- Hover over the title of the page you want to target.
- 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
- Go to Appearance > Customize.
- Click on Additional CSS.
- 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:
- Go to Appearance > Editor.
- Click Templates, then click the “+” button to create a new template.
- Choose Page and give your template a name.
- Add a Cover block or Group block, then upload your background image.
- Save the template.
- 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.
- In your theme folder (via FTP or File Manager), duplicate page.php and rename it (e.g., page-background.php).
- 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. - Save and upload the template.
- 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.
Next steps for inserting a background image on one WordPress page
Adding a unique background image to a single page can transform your design and help you build stronger visual identity—without touching your whole site.
For the easiest route, a plugin like Elementor gives you full control without code. If you want to stay lightweight or work directly in code, CSS and custom templates give you everything you need.
Ready to upgrade your WordPress experience? Professional hosting improves speeds, security, and reliability for a website and a brand that people find engaging and trustworthy.
Don’t want to deal with server management and maintenance? Our fully managed hosting for WordPress is the best in the industry. Our team are not only server IT experts, but WordPress hosting experts as well. Your server couldn’t be in better hands.
Click through below to explore all of our hosting for WordPress options, or chat with a WordPress expert right now to get answers and advice.
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