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

The Brine family has multiple templates, which share the same underlying structure and functionality. This guide applies to all these templates.


In the Brine family, you can add a full-bleed image or video at the top of the page, called a banner.


Tip: To experiment on your own, add an image in the Media tab of a page's Settings. For detailed information, see the rest of this guide.

Supported pages

You can add banners to the top of these page types:

  • Album
  • Blog
  • Events
  • Gallery
  • Products
  • Regular Pages

Banners don't display above collection items (blog posts, product items, individual events), even if these pages have thumbnail images.

Add a banner

To create a page banner:

  1. From the Home Menu, click Pages.
  2. Hover over the page title and click the gear-icon
  3. In the Media tab, add a thumbnail image or video URL

To learn more, visit Adding a banner image.

Change a banner

To change a banner image or video:

  1. From the Home Menu, click Pages.
  2. Hover over the page title and click the gear-icon
  3. Click the Media tab
  4. For banner images, click Images, then Remove. Add a new thumbnail image
  5. For banner videos, click Video and replace the video URL
Tip: For Index Page content sections, there's a banner editing annotation as well.

Stack multiple banners

To stack multiple banners vertically on one page, add content sections to an Index Page. The banner image or video creates the background for each section. Learn more in Brine Index Pages.

Banners and your site header

The header that displays at the top of your site is split into two sections: the top and bottom.

Banners display in the bottom half of the header. Any header elements (such as site title or navigation links) that you add to your header's bottom section will display on the banner as an overlay.

  • Header elements display site-wide.
  • Use  overlay tweaks in Site Styles to give the elements their own style.
  • Each page's intro also displays on that page's banner, below the header elements. You can use this area to add your own content, like text and buttons.
  • Learn more at Brine site header.


Add text and other content

You can add content as an overlay on your banners in two ways:

  • Site wide - Your site's header elements, such as your site title, tag line, navigation links, and search bar, display site-wide. These consistent elements help visitors navigate your site.
  • Page-specific - Each page has an intro area, which displays over the banner image. You can add unique content to the intro with blocks, such as text, buttons, images, and more. This is a great way to customize individual pages and introduce the page content to your visitors.
Tip: We don't recommend using a banner image that has text within the actual image file. To learn more, visit Adding text to banners.

Add a color filter

brine-structure10.gifthorne-structure8.pngYou can add a color filter to your banners with the Overlay Color tweak Main: Overlay section of Site Styles.

Tip: The Overlay Color tweak affects all banners on your site. To style an individual page banner, use the built-in Image Editor or your own image editing software.

Add the same banner to every page

In the Brine family, banners are page-specific. To add the same image at the top of every page, open each page's settings and add the image as a thumbnail.

Special scrolling effects

Brine family banners support an optional visual effect called parallax scrolling, where elements on the page scroll at different speeds. This creates the illusion of depth and immersion.

You can enable or disable this site-wide in the Main: Overlay section of Site Styles:

  • Use the Enable Parallax tweak to choose whether images parallax scroll.
  • Check Parallax Smart Crop to set how parallax images crop. When this tweak is checked, the images crop the minimal amount.
  • Adding header elements and other content over the image heightens the effect. 
  • Learn more in Parallax scrolling.


Center the banner

You can choose how each banner is centered by changing its focal point in Page Settings.

  • Because of how parallax scrolling works, focal point changes may not have a noticeable impact on a banner image's position. Learn more.
  • Video banners don't support focal points. 

Gallery Page banners

If a Gallery Page doesn’t have a thumbnail image or video URL, the first gallery image automatically becomes the banner image. Open Page Settings to remove or replace the thumbnail image.

Video banners

You can add a video banner by adding a video URL instead of a thumbnail image in Page Settings. To learn more, visit Adding a background video.


  • Video banners sometimes won't display on mobile, depending on the visitor's connection speed and browser version. Set a mobile fallback image to appear when the video banner can't load.
  • You can add videos from Vimeo or YouTube.
  • Video banners have the same options as banner images. For example, they support parallax scroll, intro areas, header overlays, and color filters.
  • Video banners don't support focal points. 

Change the banner height

To change the height of an individual banner:

  • Edit the intro area and add line breaks (press the return key).

To change the height of all banners on your site, experiment with these Site Styles settings:

  • Intro Padding (With Background Image) in the Main section
  • Padding in the Header: Bottom section (only available if you have header elements in your bottom header)

Change the banner width

Banners display full-bleed, meaning they extend to the edges of the browser. To set their width, change the site width and layout and choose the Constrained layout.

Slideshow banners

In the Brine family, page banners always display just one image or video.

To create the effect of a slideshow page banner, create an Index Page with a slideshow gallery.

Cropping issues

  • Check Parallax Smart Crop to set how parallax images crop. When this tweak is checked, the images crop the minimal amount.
  • See our troubleshooting tips for general banner cropping issues.

Site width and background

Use the Design tweak in the Site section of Site Styles to choose the width of your site. Banners always display full-bleed. 


Banners do display on your mobile site. Because mobile devices are typically a different orientation and width than desktop, the banners will crop more on mobile.


You may find these troubleshooting tips helpful:

Was this article helpful?
2 out of 8 found this helpful