Adding banner images in version 7.0

Add a visual focal point to the top of a page to hold your visitors' attention.

A banner image displays near the top of the page, adding a visual element that sets the tone for your site. This guide reviews the steps for adding and styling banner images in version 7.0. How you add and style banner images depends on your template.

To create a banner image in version 7.1, add a section background image to a section at the top of a page.

Watch a video

Image formatting tips

Check the formatting for your images before uploading to your site. For banner images, follow these guidelines:

• Use images between 1500 pixels and 2500 pixels wide
• Ensure images are wider than they are tall
• Use images with abstract patterns and without borders
• Don't use images with text in the actual image file. Instead, add text over the image
• For image file types and complete image requirements, visit Formatting images for the web
• If you want a text-only message at the top of your site, add an announcement bar instead of a banner

Add a banner image

Different templates support different types of banner images:

• Page banner - Displays at the top of individual pages. Added as the page featured image.
• Collection item banner - Displays above individual blog posts, products, and events. Added as the item's featured image.
• Site-wide banner - Can display on every page. Added in site styles.

To learn more, review our comparison table of banner options by template or watch our video example of adding each banner option.

Add a page banner

To add a page banner:

1. Open the Pages panel.
2. Hover over the page title and click , then click Media.
3. Click Add Image to upload an image from your computer, or click Search For Images to reuse an image or add a stock image. Some templates also support video banners.
4. Click and drag the focal point to set the center point of the image. This helps with cropping in most templates.
5. Click Save to publish your changes.
6. Use Site styles to style your banner.

To edit an existing banner, hover over the page and click Banner, or reopen page settings with .

To learn more about which templates support page banners, visit Banner options by template.

Tip: As an alternative to our built-in options, you can add an image block to the top of a layout page on any Squarespace site.

Add a collection item banner

Collection item banners display above individual blog posts, products, and events.

To add a collection item banner, open the editor for that item, then add a featured image in the Options tab. For detailed steps, visit Adding featured images.

Some collection items display page banners instead. For example, a blog post might display the blog page banner. To learn more about which templates support collection item banners, visit Banner options by template.

Add a site-wide banner

Site-wide banners are available in the Five template and some discontinued templates. They display on any pages that don't have a page banner added.

To add a site-wide banner, click its style tweak in site styles.

• In Five, the tweak is Header Background Image.
• In discontinued templates, the tweak may have a different name.

After you've added the image, style it with the options that appear.

Note: Site-wide banners should never be larger than 2500 pixels, as this can cause issues on mobile.

Banner options by template

These template families support one or more banner types:

Template family	Pages	Video banners	Collection items	Other options
Adirondack	Layout Blog Events Products	Yes	Blog posts Events Products	Fade effect on scroll
Bedford	Layout Album Blog Events Index Products	Yes	Blog posts Events	Banners can display behind the header Slideshow banners Stacked Index banners Blog page slideshow banners
Brine	Layout Album Blog Events Gallery Index Products	Yes	n/a	Banners can display behind the header Slideshow banners Stacked Index banners Parallax scrolling
Farro	n/a	No	Blog posts	n/a
Five	Layout Album Blog Events Gallery Products	Yes	Page banners display on blog posts, events, products	Site-wide banners Site title, logo, and tagline can overlay banners
Montauk	Layout Blog Events Index	Yes	Page banners display on blog posts, events	Banners don't crop vertically
Pacific	Layout Album Blog Events Gallery Index Products	Yes	n/a	Banners can display behind the header Slideshow banners Stacked Index banners Non-cropping banners
Skye	n/a	No	Blog posts	n/a
Supply	Layout Blog Album Events	No	Blog posts Events	Banner displays on the right, except on mobile.
Tremont	Layout Album Blog Events Gallery Products	Yes	n/a	Banners can display behind the header Page overlays
York	Layout Album Blog Events Gallery Index Products Project	No	n/a	Index banners Fade-in effect

Add text to a banner

Depending on your site, you can add text or other content overlaying banner images. Because the text that you add adapts to fit any screen size or mobile device, this is a great way to add text to your banner.

We don't recommend using a banner image that has text in the actual image file for a couple reasons:

• Computers can't read this text, so search engines won't index it for results.
• When your banner changes shape to adapt to different browser widths, parts of the text will get cropped.

Different templates support different types of text overlays:

• Page title and description - Displays the title and description added in the page settings over page banners.
• Collection item banner text - Displays text from collection item settings over blog posts, events, or product items.
• Index page banner text - Displays description text overlaying the banner, or page content can overlay the banner, depending on the template.
• Intro area overlay text - text blocks and other block content overlay the header area of the page where the banner displays.

To learn more about which templates support which types of overlay text, visit Banner text options by template.

Add intro area overlay text

Templates in the Brine family support an intro area that displays over the banner. You can customize this area with blocks, such as a text block or button block.

Add a page title and description

Most templates display the page title and description over page banners. To add text to a banner in templates:

1. Open the Pages panel.
2. Hover over the page title in the left panel and click .
3. Add text to the Page Title and Page Description fields in the General tab.
4. Click Save, then refresh the page. Banner changes sometimes don't appear in the site preview until you refresh the page.

Keep in mind:

• For these templates, page descriptions shouldn't be used purely for adding SEO-based content. Using page descriptions for the banner won't have a negative effect on SEO.
• To display a different title in search results and social shares, add an SEO title.
• You can create extra height in most templates by adding blank spaces to the description. Press Return or Enter around the description text to show more of the image. This can help fix cropping issues and increase the height of the banner for a dramatic effect.

Add collection item banner text

Collection item banners typically create their overlay text from the settings for that blog post, event, or product. Use the links below to learn more about adding text to each item type:

• Blog posts
• Events
• Product items

Troubleshooting

If your text doesn't display, try these troubleshooting steps:

• Refresh the page.
• Check the template table to confirm your template supports banner text for that page type.
• Open site styles and check if your template has style options that hide the banner or banner text.
• Ensure you have a banner image added, as some templates require a banner image to display the text.
• Review your template's guide.

Banner text options by template

Here are the banner text options in these template families:

Template family	Page banners	Collection item banners
Adirondack	No text overlay	Blog posts, events, products: No text overlay
Bedford	Page description with special formatting options (buttons, headers). Slideshow banners and blog page banners have other options.	Blog posts: Title, one metadata element. Events: No text overlay
Brine	Open blocks area ("intro area") Header content (such as site title and navigation links) can display over the banner.
Farro		Blog posts: Post title and up to four metadata elements
Five	Page title and description, the site title/logo and tagline, or just the banner image. Learn more.	Same as page banners
Montauk	Page title and description.
Pacific	Page title and description. Can also include site title and navigation.
Skye		Blog posts: Date can display in a callout
Supply		Blog posts, events: No text overlay
Tremont	Page title and description as a page overlay.
York	Page title and description.

Style the banner

Use the tweaks in site styles to change fonts, colors, and other banner elements. Banner style tweaks usually affect every banner on your site.

Learn about the banner styling options in your template's guide.

Transparent images

If you use a .png file with a transparent background, the following tweaks change the color that displays behind the banner:

• Adirondack - Content Background Color
• Bedford - Banner Overlay Color
• Brine - Overlay Color in the Main: Overlay section
• Farro - Post Background Color. The Overlay Color also affects the color.
• Five - Header Background
• Montauk - Canvas Background
• Pacific - Overlay Color
• Skye - Site Background
• Supply - Page Color
• Tremont - Site Background Color
• York - Background Color in the Banner section

Usually, the color displays at 100% opacity. If you're having trouble getting the color you want, change the transparency.

Change the banner size

Use the table below to learn how change the banner size in these template families. Note that it's not possible to change the banner width in most templates.

Template family	How to change the size
Adirondack	Height tweak
Bedford	Page and video banners - Add line breaks to the page description. Learn more. Slideshow banners, Blog slideshow banners, and Collection item banners - Fixed height
Brine	Add line breaks to the intro area. Index banners have separate height options.
Farro	Use the Header tweak in the Blog: Item section to adjust the banner size.
Five	Use the Banner Area Height or Banner Area Spacing tweaks. (Banner Area Height doesn't affect mobile.)
Montauk	Fixed height, set by the original image. Page banners always display at the width of the site content. They don't crop vertically.
Pacific	Add line breaks to the page description or use the Padding tweak. Learn more. Index banners have separate height options.
Skye	Use the Banner Image Width tweak to adjust the banner width. The height is set by the original image, proportional to the width.
Supply	Page width is fixed, so the banner fills the remaining width of the browser.
Tremont	Page Banner Image Height tweak
York	Height tweak

If your banner doesn't look right, visit Troubleshooting cropping issues.

Add a button to a banner

Encourage visitors to click a link to a specific page, donate to your organization, or sign up for your newsletter by adding a button to your banner.

These template families include special overlay options for adding buttons over banner images and videos on individual pages:

• Bedford - Format the page description text to create a button in the last line.
• Brine - Add a button block to the intro area on a page with a banner.

Banners on mobile

Banner images will always experience some cropping on mobile devices.

To learn how banners appear on mobile devices, visit How will my site appear on mobile devices?

Remove a banner image

How you remove a banner image depends on where it is on your site:

• Page banners - In the Media tab of the page settings, click Remove Image.
• Collection item banners - Open the individual item (blog post, product, or event), click the Options tab, then click the trash can icon.
• Site-wide banners - Open the specific tweak in site styles and click Remove.