You can personalize your 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.
This feature is available on sites with our WordPress.com Premium, Business, and Commerce plans. For free sites and sites on the Personal plan, upgrade your plan to access this feature.
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:
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.
- 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.
- 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.
- 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.
