---
title: "How to Customize the Background of the Storefront Theme"
description: "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..."
url: https://www.inmotionhosting.com/support/edu/wordpress/customize-background/
date: 2018-02-16
modified: 2020-10-12
author: "InMotion Hosting Contributor"
categories: ["WordPress Tutorials"]
type: post
lang: en
---

# How to Customize the Background of the Storefront Theme

As we continue our series on the [Storefront theme](https://www.inmotionhosting.com/support/edu/wordpress/themes/install-storefront-woocommerce-plugin/), 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](https://www.inmotionhosting.com/support/edu/wordpress/logging-into-wordpress-dashboard/).
2. [![](https://www.inmotionhosting.com/support/wp-content/uploads/2018/02/wordpress_woocommerce_storefront_set-site-identity_customize-appearance.png)](/support/wp-content/uploads/2018/02/wordpress_woocommerce_storefront_set-site-identity_customize-appearance.png) In your navigation menu click **Appearance** then **Customize**.
3. [![](https://www.inmotionhosting.com/support/wp-content/uploads/2018/02/wordpress_woocommerce_storefront_customize-background_customize-background.png)](/support/wp-content/uploads/2018/02/wordpress_woocommerce_storefront_customize-background_customize-background.png) In the *Customizer* click the **Background** link.
4. [![](https://www.inmotionhosting.com/support/wp-content/uploads/2018/02/wordpress_woocommerce_storefront_customize-background_select-background-color.png)](/support/wp-content/uploads/2018/02/wordpress_woocommerce_storefront_customize-background_select-background-color.png) If you want to use a *background color* click the **Select Color** button, then choose your color. [![](https://www.inmotionhosting.com/support/wp-content/uploads/2018/02/wordpress_woocommerce_storefront_customize-background_background-color-change.png)](/support/wp-content/uploads/2018/02/wordpress_woocommerce_storefront_customize-background_background-color-change.png) The new background color will display immediately.
5. [![](https://www.inmotionhosting.com/support/wp-content/uploads/2018/02/wordpress_woocommerce_storefront_customize-background_select-background-image.png)](/support/wp-content/uploads/2018/02/wordpress_woocommerce_storefront_customize-background_select-background-image.png) If you want to use a background image click the **Select image** button under *Background Image*.
6. [![](https://www.inmotionhosting.com/support/wp-content/uploads/2018/02/wordpress_woocommerce_storefront_customize-background_choose-background-image.png)](/support/wp-content/uploads/2018/02/wordpress_woocommerce_storefront_customize-background_choose-background-image.png) **Upload** an image or select it from your **Media Library** if you have uploaded it previously. Then click the **Choose image** button. [![](https://www.inmotionhosting.com/support/wp-content/uploads/2018/02/wordpress_woocommerce_storefront_customize-background_storefront-background-image.png)](/support/wp-content/uploads/2018/02/wordpress_woocommerce_storefront_customize-background_storefront-background-image.png) Your new background will display immediately.
7. [![](https://www.inmotionhosting.com/support/wp-content/uploads/2018/02/wordpress_woocommerce_storefront_customize-background_customize-background-image.png)](/support/wp-content/uploads/2018/02/wordpress_woocommerce_storefront_customize-background_customize-background-image.png) 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. [![](https://www.inmotionhosting.com/support/wp-content/uploads/2018/02/wordpress_woocommerce_storefront_customize-background_publish-background.png)](/support/wp-content/uploads/2018/02/wordpress_woocommerce_storefront_customize-background_publish-background.png) 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.