Note: While our most popular guides have been translated into Spanish, some guides are only available in English.

Adding banner images

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.

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.

Image formatting tips

  • We recommend uploading images that are at least 1500 pixels wide. For help choosing an image that will look great in all browsers, review our responsive design tips.
  • We don't recommend using an image that has text within the actual image file. Instead, add text over the image.
  • You can use .jpg, .png, and .gif images. For 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.

Add a banner image

How to add banner images and the layouts you can create with them depends on your site's version.

You can create banner images on any page by adding a block section with a background image to the top of the page. It's not possible to add banner images to individual blog posts, events, or products.

To add a banner image:

  1. In the Home Menu, click Pages, then click the page.
  2. In the top-left corner, click Edit.
  3. Click + at the top of the page to add a section. Choose Add Blank if you just want a banner image with no content overlaying it.
  4. Click the new section's pencil icon, then click Background.
  5. Click Add an Image to upload an image, or click Search Images to reuse an image or add a stock image. To add a video instead, visit Adding background videos.
  6. Set the Background Width and Overlay Opacity.
  7. Click Format to adjust the section height, content width, and content alignment.
  8. Click Colors to select a color theme for the overlay and any content added.

You can add content overlaying the banner, or add more sections for page content below. After making changes, hover over Done and click Save.

Different templates support different types of banner images:

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

See a comparison table of banner options by template.

Add a page banner

To add a page banner:

  1. In the Home Menu, click Pages.
  2. Hover over the page title and click the gear icon, 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 the gear icon.

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

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 thumbnail image in the Options tab. For detailed steps, visit Adding thumbnail 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, see 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.

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 within 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.

How you add banner text depends on your site's version.

To add text or other content:

  1. Click Edit on the page with the banner.
  2. If you added a Blank section, it includes a Text Block already. Click into the block to add text, then use the Format drop-down to choose a paragraph style.
  3. Click an insert point to add more Text Blocks or other content.
  4. Hover over Done and click Save.

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, see 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. In the Home Menu, click Pages.
  2. Hover over the page title in the left panel and click the gear icon.
  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:

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.  

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

  • 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

 

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

 

Skye

 

Supply

 

  • Blog posts, events: No text overlay

Tremont

 

York

  • Page title and description.

 

This video applies to version 7.1.

Style the banner

How you style the banner depends on your site's version.

Banner image

To style the banner image, click Edit on the page, click the pencil icon on the banner's section, then click Background. You can set the Background Width and the Overlay Opacity.

For Background Width:

  • Full Bleed extends the image from one edge of your browser window to the other, spanning the width of your site.
  • Inset indents the image slightly and creates a border around the image.

When the image is set to Inset, you can set the border color.

Banner text

Your site's style settings in the Design panel set how text displays in your banner section.

  • To change your site's fonts, choose a font pack and base size in the Fonts panel. Click the gear icon to style specific text. To learn more, visit Changing fonts
  • To change your font color, choose a palette and theme in the Colors panel. Hover over your theme and click the pencil icon to style specific elements within that theme. To learn more, visit Changing colors

Use the tweaks in Site Styles to adjust 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 adjust 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

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

Change the banner height

How you change the banner height depends on your site's version.

To change the banner's height:

  1. Click Edit on the page, then click the pencil icon on the banner's section.
  2. In the Format tab, under Section Height, select a preset height or click ... to set a custom height.
  3. Hover over Done and click Save.

The section height affects how the background image crops on both computers and mobile devices. We recommend testing different heights to get the look you want.

Banner height also depends on the amount of content on the section. To increase the banner height without adding visible content, add Spacer Blocks.

To set the height for banners in these template families:

Template family

How to change the height

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 areaIndex 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 moreIndex 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.

Banners on mobile

When viewing your site on mobile devices, keep in mind:

  • Banner images will always experience some cropping on mobile devices.
  • Banner height settings don't always apply to mobile.
  • For video banners, set a mobile fallback image to appear when the video can't load due to connection speed or browser type.
  • For site-wide banners, the Fix Position setting won't appear on some mobile devices, including iOS.

Remove a banner image

How you remove a banner image depends on your site's version.

To remove a banner image:

  1. Click Edit on the page, then click the pencil icon on the banner's section.
  2.  Click Background.
  3. Click Delete.
  4. Hover over Done and click Save.
  • 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.

Watch a video

This video applies to version 7.0.

Was this article helpful?
31 out of 178 found this helpful