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

Full-bleed images

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.

Your site’s ability to display full-bleed images depends on its template and version. Some templates are designed with big, bold images in mind, while others emphasize blank space and more space around blocks.

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.

Any template that supports a site-wide background image can display it full-bleed. 

For a list of supported templates, visit Adding a background image. To set a background image to full-bleed, choose the Size: Cover style setting.

Here's an example in the Avenue template:

avenue_site_background_image.jpg

Banners

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

Tip: In version 7.1, you can create a banner from any section.

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.

Here's an example in the Five template:

five_-_full_bleed.jpg 

Cover Page backgrounds

Version 7.1 doesn't support Cover Pages.

You can add a Cover Page to any template. Many Cover Page layouts use full-bleed background images.

Here's an example with the Trade layout:

Gallery Pages

Gallery Pages are only available in version 7.0. In version 7.1, use gallery sections instead.

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.

Here's an example in the Momentum template:

Gallery sections

Gallery sections are only available in version 7.1. In version 7.0, use Gallery Pages instead.

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

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 Resizing an image.

In version 7.0, some templates support a feature called content inset, where certain blocks, including Image Blocks, can display wider than others. Although they don't display full-bleed, they'll display full-width within the main content area and padding.

Here's an example in the Brine template: 

brine-content-inset.png

Portfolio and Index Page images

Portfolio and Index Pages are different page types in different versions of Squarespace, but they 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

Here's an example of stacked banners in the Brine template:

Project Pages

Projects Pages are only available in version 7.0. In version 7.1, use gallery sections instead.

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.

Tips:

  • Project Page images never stretch larger than their original dimensions.
  • Video width is set by the hosting site. To ensure your videos display full-bleed, use the video embed code and set the width manually within the code.

Here's an example:

 

Was this article helpful?
28 out of 159 found this helpful