How to Customize the Background of the Storefront Theme

As we continue our series on the Storefront theme, we will now show you how to customize the background of your Storefront theme in WordPress. This allows you to use a background image or specific color and can help you further brand your WooCommerce website.

Customize Background

  1. Log into your WordPress Dashboard.
  2. wordpress woocommerce storefront set site identity customize appearance

    In your navigation menu click Appearance then Customize.

  3. wordpress woocommerce storefront customize background customize background

    In the Customizer click the Background link.

  4. wordpress woocommerce storefront customize background select background color

    If you want to use a background color click the Select Color button, then choose your color.

    wordpress woocommerce storefront customize background background color change

    The new background color will display immediately.

  5. wordpress woocommerce storefront customize background select background image

    If you want to use a background image click the Select image button under Background Image.

  6. wordpress woocommerce storefront customize background choose background image

    Upload an image or select it from your Media Library if you have uploaded it previously. Then click the Choose image button.

    wordpress woocommerce storefront customize background storefront background image

    Your new background will display immediately.

  7. wordpress woocommerce storefront customize background customize background image

    You will also see additional settings available. Below is a description of the options.

    Option Description
    Preset The background image will Repeat by default but you can choose to have it Fill Screen, Fit to Screen, or set it to Custom if you want to change the image position.
    Image Position Use the arrows to move the background image where you want it.
    Image Size Here you can choose if you want the image to display in the Original size, Fit to Screen, or Fill Screen.
    Repeat Background Image Check this for the image to repeat in the background.
    Scroll with Page Check this for the image to scroll up and down with the page, instead of staying displayed in the background.
  8. wordpress woocommerce storefront customize background publish background

    Click the Publish button to save your changes.

Congratulations, now you know how to customize the background of your Storefront theme in WordPress! In the next guide, we will show you how to Customize your Typography in the Storefront theme.

JB
John-Paul Briones Content Writer II

John-Paul is an Electronics Engineer that spent most of his career in IT. He has been a Technical Writer for InMotion since 2013.

More Articles by John-Paul

Was this article helpful? Let us know!