Full-bleed images

Make a visual impact by adding wide images that extend to the edge of the screen.

Last updated January 24, 2023

A full-bleed image extends from one edge of your browser window to the other, spanning the width of your site. This creates an expansive feel and puts the focus on your site's imagery.

In version 7.1, you can add full-bleed images to any page. In version 7.0, your site’s ability to display full-bleed images depends on its template.

7.1_full_bleed.jpg

7.1_full_bleed.jpg

Before you begin

  • To create a full-bleed image on your site, we recommend uploading an image with a width between 1500 pixels and 2500 pixels.
  • Because full-bleed images change size depending on the width of the browser, they will always experience some cropping.
  • Although these terms are sometimes used interchangeably, "full-bleed" images extend to the edge of the browser screen, while "full-width" images extend only to the edge of the main content area.

Background images

Background images work differently depending on which version of Squarespace your site is on.

Create a full-bleed background image in any section by switching the Background Width toggle to Full Bleed in section styles.

To make a background image fill a whole page, add all content for that page to one section.

Some templates are designed with big, bold images in mind, while others emphasize blank space and more space around blocks.

Any template that supports a site-wide background image can display it full-bleed. To set a background image to full-bleed, choose the Size: Cover style setting.

You can also add a cover page to any template. Many cover page layouts use full-bleed background images.

Banners

Banner images work differently depending which version of Squarespace your site is on.

Add a banner to any section by adding a background image or video, then switching the Background Width toggle to Full Bleed in section styles.

Banners display at the top of your site, either beneath or behind the header.

Banners display at full browser width in these template families:

  • Adirondack - Banners display at full site width, but don't expand to full browser width.
  • Brine
  • Bedford
  • Five
  • Pacific
  • Supply - Vertical banners display at the height of the browser on blog posts and events.
  • Tremont
  • York - Check Show Page Banner and Full Bleed Banner in site styles.

Depending which version of Squarespace your site is on, your site has different gallery options.

Images in gallery sections can display full-bleed. In gallery section styles, switch the Width toggle to Full Bleed.

Gallery layouts display full-bleed in these template families:

Template Gallery style
Ishimoto Carousel
Momentum Slideshow

Tremont

Grid
Wexley

Grid. Adjust the Index Item Padding and Outer Padding.

Project pages

The York family supports a special page type called a project page, which mixes text and imagery in eye-catching ways.

In site styles, check Full Bleed Project and Allow Full Width Portrait And Square to display all images at browser width.

Image blocks

Image blocks display at a standard width within the padding of the main content area, the same width as all other blocks. They don't have built-in full bleed options.

To learn more, visit Image blocks.

Portfolio and index page images

Portfolio and index pages work in similar ways:

  • In version 7.1, a portfolio page is a grid of images that link to other pages on your site. All 7.1 sites support portfolio pages.
  • In version 7.0, an index page is a unique layout of images that link to other pages on your site. Only some 7.0 templates support index pages, and each Index has its own style.

Portfolio pages can display full-bleed in the Portfolio Index Background layout.

Index pages display full-bleed images or collages of images in these template families:

Template

Options

Avenue

Thumbnail grid. Check Full Width Index and adjust the Thumbnail Padding to 0% and Canvas Padding to 0px (manually enter 0px).

Brine

Stacked banners, and gallery sections.

Bedford

Stacked banners

Flatiron

Thumbnail grid or mosaic

Forte

Slideshow

Momentum

Slideshow

Pacific

Stacked banners

Tremont

Slideshow

York

Stacked banners. Choose Site Outer Padding: Custom and set Site Custom Padding to 0px

Footer Image
  • Get help from our community

  • Get help from our community on advanced customizations.

  • Hire a Squarespace Expert

  • Stand out online with the help of an experienced designer or developer.