You can personalize your WordPress site’s look and feel by giving it a custom background. This guide will show you how to change your site’s background image or add a background image to specific blocks.
WordPress sites primarily use two different editing tools (either the Site Editor or the Customizer). You will follow different instructions for changing the background image, depending on which tool your site uses.
How to find out which tool you are using:
- Visit your site’s dashboard.
- Look at the left menu under Appearance.
- If you see Editor, use the Site Editor tab below.
- If you see Customize, use the Customizer tab below.
Choose the tab that matches your site:
This feature is available on sites with the WordPress.com Personal, Premium, Business, and Commerce plans. For free sites, upgrade your plan to access this feature.
Block themes that use the Site Editor include a Styles option where you can change your site’s background image. To change the background color, follow these steps:
- Visit your site’s dashboard.
- Navigate to Appearance → Editor in the menu on the left.
- Select the Styles option from the left-side menu.
- Click the Background option in the Styles panel that opens.
- Click the “Add background image” button.
- Choose from the options in the drop-down:
- Open Media Library: Use an image you have already uploaded to your site’s Media Library.
- Upload: Upload a new image from your device.
- Current media URL: Paste or type the address of an image hosted on another website, then press Enter. The image isn’t added to your Media Library, so it stops showing on your site if it’s removed from the other website.
- Click the “Review change” button at the bottom left to review and save your changes.
Once you have added a background image to your site in the Site Editor, you can customize how it appears in the background.
To adjust a background’s image settings, follow these steps:
- Navigate to Appearance → Editor and click on Styles.
- Click the Background option, then click the background image title to open the settings.
- Adjust any of the following settings:
- Focal Point: Set the focal point of the image you want focused on smaller screens that can’t show the full image. You can drag the circle in the image or specify the exact position using the “left” and “top” percentage options.
- Fixed background: The background is fixed relative to the viewport. The image will remain static behind your site’s content.
- Size:
- Cover: Stretch the background image to cover the entire block.
- Contain: Resize the background image to fit the block without cropping.
- Tile: Set a fixed width for the background image in the custom field. Use the fields below the size section to set a size and whether or not the image should repeat.
To replace or remove the background image in the Site Editor:
- Navigate to Appearance → Editor and click on Styles.
- Click the Background option, then click the background image title to open the settings.
- Click the background image title at the top of the settings and select one of the following options:
- Open Media Library: Replace the background image with one from your site’s media library.
- Upload: Replace the background image with one from your device.
- Current media URL: Replace the background image with one hosted on another website by pasting its address.
- Reset: Remove the background image completely.
Several blocks used in block themes include a setting to display a background image behind the block’s content. These blocks include:
- Group block: Use this block to group content and add a background image.
- Content block: This is a block used to display your content in a template. Use this option to add a background image to your site’s content.
- Cover block: Perfect for adding banners to your site.
- And more.
To set a background image on a specific block, take the following steps:
- Select the block you wish to add a background image to.
- Open the block settings sidebar on the right side.
- Locate the “Background image” setting under the Styles section of the block’s settings.
- If the block does not have a background image option, group it in a Group block and apply the background image to the Group block.
- Click on “Add background image” and select one of the following options:
- Open Media Library: Select an existing image from your site’s media.
- Upload: Add a new image from your computer or device.
- Current media URL: Paste or type the address of an image hosted on another website, then press Enter. The image isn’t added to your Media Library, so it stops showing on your site if it’s removed from the other website.
- Reset: Remove the background image.
- Optionally, click the background image’s title to customize the focal point, size, and more.
The background image will take priority over any background color set.
This section applies to sites created with the AI Website Builder or sites that have enabled the WordPress Agent. Open the WordPress Agent by clicking the AI icon (a four-pointed star) in the admin bar at the top of the screen.
The WordPress Agent can help you choose and configure the right background image for your site. When you open the WordPress Agent in the Site Editor (Appearance → Editor), the WordPress Agent can also set a background image for your site. Name the image in your media library that you want to use. Review the change, then save your changes in the Site Editor. Here are some sample prompts you can copy and use:
- “What type of background image works best for a professional services site?”
- “How do I choose a background image that doesn’t distract from my content?”
- “What resolution and size should a background image be for a WordPress site?”
- “Suggest a background image style for a travel blog.”
You can use external AI agents like ChatGPT, Claude, Cursor, OpenClaw, and more to read and edit your website securely. Enable MCP tool access for external AI agents.
AI agents can set a background image across your whole site, using an image from your media library. Here are some things you can ask an agent to do:
- “Use the flower photo in my media library as the background image on yourgroovysite.wordpress.com.”
- “Set a background image on yourgroovysite.wordpress.com and make it cover the whole screen.”
- “Show me the images in my media library that would work as a site background.”
