Background images and colors display behind your site content, adding a visual element to help set the tone for your site.
Tip: The steps in this guide affect every page on your site. For page-specific changes, create a style override.
Watch a video
Add a background image or color
To add a background image or color to an area of your site:
- Enter Style Mode.
- Click Fonts, Colors & Sizes. (If you haven't already, you'll be prompted to create a custom style.)
- Click the area of your site where you want to adjust the background, or use the drop-down menu to select it. We've provided some example areas below.
- Click either Background Color or Background Image.
- If you're adding a color, use the color picker to choose the color or add the HEX, RGB, or HSV values. Then click Set.
- If you're adding an image, add an image URL, or click Select to choose an image from your file storage or computer. Then click Save.
- Next to the drop-down menu, click Save Changes before making any other changes. Otherwise, the background image or color will revert to the previous setting.
Tip: If you add both, the background image will display over the color.
Remove a background image or color
To remove a background image:
- Enter Style Mode.
- Click Fonts, Colors & Sizes. (If you're removing an image from a Squarespace template, you'll be prompted to create a custom style.)
- Click the background image or color in the preview. Its element name will appear in the drop-down menu.
- Click Background Image or Background Color.
- Click Clear.
- Click Save Changes.
Your background will return to the template and style's original settings.
Tip: If you've added both, removing the background image reveals the background color.
Repeat the background image
The background image displays at its original size. To choose how your background image repeats:
- Enter Style Mode.
- Click Fonts, Colors & Sizes.
- Click the background image you want to adjust.
- Click Background Repeat.
Then choose from the following options:
- Not Specified - The image will repeat in both directions (horizontal and vertical). This helps ensure your image is always visible.
- Don't Repeat - The image displays in the top-left corner.
- Repeat Horizontal - The image repeats horizontally (along the x-axis)
- Repeat Vertical - The image repeats vertically (along the y-axis).
If the browser screen is bigger than the image, the background color will display outside the image. Setting the Background Repeat to Not Specified ensures that the background image will repeat to cover the background area.
Position the background image
To position a background image on the page, use the Background Top and Background Left options to set the position of the image's top and left side. For example, if you wanted it to start 15 pixels below the top of the page:
- Click Background Top.
- Add 15px in the Current Value field.
- Set.
- Save Changes and refresh the page.
Example areas
Here are some areas where people commonly add a background image or color. You can choose these areas in the drop-down menu in the Fonts, Colors & Sizes tab.
Tip: If you don't see the area you want listed below, click that area in the site preview while the Appearance Editor is open. A blue style highlighter box will appear to show the area you're selecting.
| Description | Menu label |
| Main content area and sidebar | Basic Layout > Canvas |
| Outside the main content area | Basic Layout > Window Body |
| Behind the site title | Basic Layout > Site Title Area |
| Behind the navigation links | Top Navigation > Menu Bar |
Image URL best practices
An image URL is a unique web address for a specific image.
We don't recommend using an image URL from another site. If the original image is taken down, it will disappear from your site.
Instead, we suggest uploading the image to your site's file storage to get the URL:
- In the Website Management bar, click File Storage under Data & Media.
- Upload your image.
- Next to your image, click URL. The URL appears in a blue box at the top.
- Highlight this URL and copy it. You can then paste this into the URL field.
For more help, visit Using file storage.