Design Your Site

Customize Your Site’s Background

To customize the background on your site, you will use a different option depending on your theme:

📌

Background images aren’t always recommended because they make the content on top of it hard to read. Images can work well if the background is a plain pattern or one with a high contrast to the text on top of it.

Table of Contents

Change Your Background in the Site Editor

If your site uses a theme that supports the Site Editor, you can change your site’s background by navigating to Appearance → Editor.

Changing the background in this section will change it on the entire site.

Background Color

To set a custom background color for your site, you will use the Colors settings accessible from the Styles button in the Site Editor.

  1. Starting from your dashboard, go to Appearance → Editor.
  2. Click on the Styles icon in the top right corner of the Site Editor.
  3. Click on the Colors option to open up additional settings.
  4. On the next screen, click on the Background option and then select a custom color using the color picker in the Block Editor.
An arrow points to the Styles button in the Site Editor.
Background Image
  1. Starting from your dashboard, go to Appearance → Editor.
  2. Click on the three horizontal lines icon in the top left corner to open up List View.
  3. Hover on the topmost block in the List View section.
  4. Click on the three dots that appear to the right side of that block.
  5. Click on the option to Insert before.
Using List View to insert a block before another block.
  1. Insert a Cover block before all the other blocks in List View, and then add and customize your background image using the Cover block.
  2. Select and move all the other blocks in List View and place them on top of the Cover block.
  3. If there are any locked blocks, you can unlock them to enable editing and movement.
  4. If the text on top of the Cover block becomes hard to read after you’ve added your background image, you can use the opacity setting to improve visibility.
  5. Click the Save button in the top right corner after you’ve moved all blocks and placed them on top of the Cover block.
  6. The image you previously added to the Cover block will now show as the background image for your site.

Change Your Background in the Customizer

For classic themes, you can choose between a background color, background pattern, or background image if the specific theme supports it. Background patterns are loaded based on the background color of the last selected color palette for your site.

If you don’t see Colors & Backgrounds under Customize, your theme does not support changing the colors and backgrounds. Consider switching to one of the new Full Site Editing themes, which allow you to edit many aspects of your site in the Site Editor.

Watch the video below for a quick overview of how you can change your background in the customizer, and read below for more examples and settings.

To change the Background on your classic theme:

  1. Navigate to Appearance → Customize.
  2. Click on the Colors & Backgrounds tab.
  3. On the next screen, you’ll see the option named Background.

Next, you can customize your site’s background by clicking into each of the corresponding numbered sections as explained below:

Options for updating the background in the Customizer. You can edit the palette, upload an image, pick your own color, or select a pattern.
  1. Click into the colored box area to pull up the options available for customizing the background on your theme.
  2. Click on Palettes to select a new color palette to use on your site.
  3. Click Select Image to choose an image to use for your background. This option will only appear if your theme supports background images. Learn more about Background Images.
  4. Click on any of the automatic color suggestions to use it for your site.
  5. Click on the pick your own color link to open up the color picker and use it to set a custom color for your background.
  6. Click on any pattern to use it as the background for your site.
  7. Click on the More button to load additional patterns to choose from. After you’ve clicked the More button once, another Back button will appear next to it. You can use it to load the previous patterns within the selection. Background patterns are provided by COLOURlovers.
How to pick a background pattern using the More and Back buttons in the Customizer.

Background Images

After you’ve selected an image to use for the background of your site, an Options button will appear directly below it. Click on that, and you’ll see several settings to manage the display of your background image as explained below:

Options for adjusting the position of a background image in the Customizer, along with the underlying color.
  1. Click Select Image to choose an existing image from your media library, or upload a new one.
  2. Click Options to open up the additional settings available for your background image display.
  3. Click into the icons to adjust the position of your background image.
    • Position controls where the background image is aligned: left, center or right.
    • Repeat determines if an image appears once, repeats vertically, repeats horizontally, or tiles.
    • Fixed Position means the image stays fixed in place when you scroll up and down the page.
    • Underlying Color is the color that loads behind the background image.
  4. Click into the colored box to open up the color picker where you can select a different Underlying Color for your background.
  5. Click Hide background image to remove the current image and select a different one, or use a solid background color or pattern instead.

Saving Changes

Once you’re done making changes, click the Save Changes button at the top of the customizer to save your colors.

The Save Changes button at the top of the Customizer.

Not quite what you're looking for?

Get Help