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 the template you're using. 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.


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.

Here's an example in the Five template:


Site-wide background images

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

Tip: If your site is on version 7.1, you can create a full-bleed background image by switching the Background Width toggle to Full Bleed in section styles

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:


Cover Page backgrounds

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:

Index Page images

An Index Page collects content from your site and presents it in a beautiful layout. Each Index has its own style.

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




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


Stacked banners, and gallery sections.


Stacked banners


Thumbnail grid or mosaic






Stacked banners




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:

Gallery Pages

Gallery layouts display full-bleed in these template families:

Template Gallery style
Ishimoto Carousel
Momentum Slideshow



Grid. Adjust the Index Item Padding and Outer Padding.

Here's an example in the Momentum template:

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.


  • 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:

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.

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: 


Was this article helpful?
26 out of 148 found this helpful