Adding a banner image

Banner images display above your page content, adding a visual element that can set the tone for your site. They're also a good way to add your logo image to your site. 

Tip: Banner images replace any header text. To display an image behind your site title and subtitle, add it in style settings.

Watch a video

Choose and format your image

When choosing a banner image, keep these tips in mind:

• Images must be .jpg, .png, or .gif format only, and the filename can't contain special characters. For more help, visit formatting images for the web.
• Unlike our current platform, Squarespace 7, there isn't a way to add a text overlay to your banner. Instead, use third-party software to add text to the image file itself.
• For banner images, it's usually best to have a wide, short, landscape-oriented image.

The banner image displays at its original size and shape. Before adding it to your site, you may want to match the banner width to your site width.

To see your site width, enter Style mode and click Banner & Navigation. The width (content area and sidebars) displays below the Banner Image (URL) field. You can:

• Use third-party image editors to ensure your banner matches this width.
• Click Change Widths to change the width of your site.

Add the banner

1. Enter Style Mode.
2. Click Banner & Navigation. (If you haven't already, you'll be prompted to create a custom style.)
3. Add an image URL in the URL field, or click File to use an image from file storage or upload one from your computer. The pixel size listed below the URL field is the recommended width for your image.
4. Click Save Changes in the bottom-left corner. 

The banner will display on all pages of your site that don't have a page-specific style.

Add a page-specific banner

Site-wide banners display on all pages. To display a unique banner for a page, there are two options:

• Banner override - Add the banner in page configuration. This is a good option if you want a unique image on just one page.
• Style override - Create a unique page style that includes a banner. This is a good option if you want to add the same banner on multiple pages on your site, without making it site-wide.

Note: Banner overrides replace site-wide banners.

Option 1 - Banner override

1. In Structure Mode, click Configure This Page.
2. Scroll down to Advanced Options & Style Overrides.
3. Click File next to the Banner Override field to upload an image or choose one you've saved to your site.
4. Click Save Page Configuration.

See this video for more help:

Option 2 - Style override

First, create the style:

1. In Structure mode, click Templates & Styles.
2. Hover over a style variant and click Edit This Style or Copy.
3. Give it a name, like "Banner style," and click Create Style.
4. Click the Banner & Navigation tab and add a banner image.
5. Click Save Changes.
6. When you've finished adjusting your style, click Cancel in the Design Preview window.

Then, set up the style override:

1. Enter Structure mode.
2. At the top of the page content, click Configure This Page to open page settings.
3. In the Configuration tab, scroll down to the very bottom.
4. Use the Style Override drop-down menu to select a style.

For more help, visit Style overrides in Squarespace 5.

Add a header image

A header image displays behind the site title and subtitle, rather than replacing it. You can add a header image in the Fonts, Colors & Sizes tab.

To learn more, visit Building a site header.

Remove a banner image

To remove a site-wide banner:

1. In Style mode, click Banner & Navigation.
2. Delete the URL from the Banner Image (URL) field.
3. Click Save Changes.

To remove a page-specific banner:

1. Go to the page.
2. In Structure mode, click Configure This Page.
3. In the Advanced Options & Style Overrides section, delete the URL from the Banner Override field.
4. Click Save Page Configuration.

To remove a header image:

1. In Style mode, click Fonts, Colors & Sizes.
2. Use the drop-down menu to choose the area where you added the image. If you're not sure, try clicking the image in the site preview.
3. Click Background Image.
4. Delete the URL from the URL field.
5. Click Save, then Save Changes.