Back to Support Design Your Site Change Your Site's Background

Change Your Site’s Background

You can personalize your site’s look and feel by giving it a background color or image. Follow the steps in this guide to learn how.

Tips for Choosing a Background

Setting a background color or image can be a great way to show your personality and distinguish your site from others. Keep in mind these tips as you decide on how to customize your site’s background:

Method 1: Change Your Background in the Site Editor

The themes that support the site editor are highly customizable. You can add background colors and images to any Site Editor theme using the steps below.

A quick way to determine if your site uses the site editor is to check under Appearance in your dashboard. If you see Editor here, you can change your site’s background by following these steps.

Background Color

Use the styles option to change the background color of your entire site. To change the background color, follow these steps:

  1. In your dashboard, navigate to Appearance → Editor.
  2. Click on the Styles menu option on the left or select the “Styles” icon at the top right of your editor. The icon looks like a black-and-white circle.
  3. Click on the Colors option.
  4. Click on the Background option.
  5. Select your desired color using the color picker. You can choose a solid color or define a gradient.
  6. Click the “Save” button to save your changes.
A box drawn around the Styles icon in the Site Editor, with an arrow from the icon to the "Colors" option.

Background Image

Use the styles option to change the background image for your entire site. To add, remove, or change a background image for your site follow these steps:

  1. In your dashboard, navigate to Appearance → Editor.
  2. Click on the Styles menu option on the left or select the “Styles” icon at the top right of your editor. The icon looks like a black-and-white circle.
  3. Click on the Background Image option.
  4. Click the “Add background image” button to select an image from your Media Library or upload an image from your computer.
  5. Click the “Save” button to save your changes.

For additional design options, including position and whether or not the image should repeat, follow these steps:

  1. In the Background Image section of Styles, click the three dots to the right of the Image header.
  2. Check the “Size” option from the drop-down menu.

Options include:

  • Position – the focal point of the image. Use the “left”/“top” options to specify the exact position, or drag the circle in the image.
  • Size – cover, contain, or fixed
    • Contain and fixed have additional customization options, including setting the image to repeat.
A box drawn around the Styles icon in the Site Editor, with an arrow from the icon to the "Background image" option.

Site Editor themes also give you the added functionality of customizing specific templates in the theme. If you want to set a background image on a specific template but not the whole site, you can use the Group block to group the template’s content and apply background settings.

Method 2: Change Your Background in the Customizer

Not all classic WordPress themes include the option to change the background image or color. If the classic WordPress theme you’ve selected includes the option to change the background, you will see Colors & Backgrounds under Appearance → Customize.

If the classic theme you’ve selected does not have the Colors & Backgrounds under Appearance → Customize, you can switch to a theme that supports full site editing through the Site Editor. Site Editor themes are highly customizable.

Background Colors

If your classic WordPress theme supports adding colors and backgrounds, you can follow these steps to set a background color and image:

  1. Visit your site’s dashboard.
  2. Navigate to Appearance → Customize.
  3. Click on the Colors & Backgrounds tab.
    • If you don’t see Colors & Backgrounds under Customize, your theme does not support changing the colors and backgrounds. We recommend switching to a site editor theme for full control over your site. 
  4. On the next screen, view the Background setting. 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 for 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 Image below.
  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, a 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.

Background Image

After you’ve selected an image to use for the background of your site (see #3 above), 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 for your background image display.
  3. Click on 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.

Save Changes

Once you’re finished making changes, click the Save Changes button at the top of the screen to save your background.

The Save Changes button at the top of the Customizer.

Was this guide helpful for you?

Not quite what you're looking for? Get Help!

Copied to clipboard!