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 the browser 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 white space and padding.

Before you begin

  • For any full-bleed image, we recommend you upload 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

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

The following templates support banners that display at full browser width. Templates are grouped by family.

  • Adirondack
  • Brine, Aria, Basil, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Polaris, Rally, Rover, Sofia, Sonny, Sonora, Thorne, Wav, West
  • Bedford, Anya, Bryant, Hayden
  • Five
  • Marquee, Adversary, Alex, Eamon, Ginger, Mint, Shift (discontinued)
  • Pacific, Charlotte, Fulton, Horizon, Naomi
  • Supply - Vertical banner displays at the height of the browser on blog posts and events.
  • Tremont, Camino, Carson, Henson
  • York, Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori - Check Show Page Banner and Full Bleed Banner in the Style Editor

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.

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.

The templates below have Indexes that display full-bleed images or collages of images. Templates are grouped by family.

Avenue

Thumbnail grid

Check Full Width Index and adjust the Thumbnail Padding and Canvas Padding

Brine, Aria, Basil, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Polaris, Rally, Rover, Sofia, Sonny, Sonora, Thorne, Wav, West

Stacked banners, and gallery sections.

Bedford, Anya, Bryant, Hayden

Stacked banners

Flatiron

Thumbnail grid or mosaic

Forte

Slideshow

Momentum

Slideshow

Marquee, Adversary, Alex, Eamon, Ginger, Mint, Shift

(Discontinued)

Stacked banners

Pacific, Charlotte, Fulton, Horizon, Naomi

Stacked banners

Tremont, Camino, Carson, Henson

Slideshow

York, Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori

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

The following templates have full-bleed gallery layouts. Templates are grouped by family.

  • Ishimoto - Carousel
  • Marquee, Adversary, Alex, Eamon, Ginger, Mint, Shift (discontinued) - Slideshow view only
  • Momentum - Slideshow
  • Tremont, Camino, Carson, Henson - Slideshow
  • Wexley - Grid. Adjust the Index Item Padding and Outer Padding

Here's an example in the Momentum template:

Project Pages

York, Artesia, Flores, Harris, Jasper, Jones, Lange, and Shibori support a special page type called a Project Page, which mixes text and imagery in eye-catching ways.

In the Style Editor, 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 in the York template:

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: 

brine-content-inset.png

Was this article helpful?
5 out of 12 found this helpful