How do I add or change my background image?

Step 1 - Create a Custom Style

To change your background image you'll need to create a custom style for your site. See this illustrated guide for help with this.

Step 2 - Access Style Mode

Click the Style icon to enter Style Mode.

Step 3 - Add/Change the Background Image

In Style Mode click the Fonts, Colors & Sizes tab and choose the element you want to modify from the drop-down menu there. Next click the background image selector. If there is an existing image added there you can click clear to remove this as the background for that style element. To add a new image, click the select button -- you can either choose an existing image from your file storage, or upload an image directly.

How do I make my background image repeat down and across the page?

Step 1 - Enter Style Mode 

Enter Style Mode

Step 2 - Select a Style Element for Editing

Access the Fonts, Colors, and Sizes area and use the drop-down menu to select the element where you have added your background and wish for it to repeat.

Step 3 - Set the Background Repeat

Click to select the background repeat selector and select the (not specified) option. This will cause the background image to repeat automatically within the browser both horizontally and vertically.

Removing an Existing Background Image

Certain Squarespace default layouts have one or more background images added within the customizable elements of the style to help them attain a certain look.  You can delete these images if you want to remove the background image in favor of a background color or different image.  Before making any changes to your style, you will have to create your own custom style using the process outlined in this guide.

In this guide we will use the Window Body style element as an example, but the same principles apply for any other style element with a default background image.

Step 1 - Selecting the Style Element

Switch to Style Mode in the upper right corner of your screen.  In your style, navigate to Fonts, Colors & Sizes and choose the Window Body element from the drop down menu.

Step 2 - Remove Element Background Image

In the customizations list, click the Background Image field.  In the pop-up window, select Clear to remove the background image URL.

Step 3 - Save Changes

Once this is removed, click Save Changes

Was this article helpful?
0 out of 2 found this helpful
How do I add or change my background image?