Making a Full-width Squarespace Header Image


So you've gone through Squarespace templates, and you've noticed a common theme.  Many of the templates sport a really nice, gigantic Banner Image at the top of the site, with text or a Site Title overlaid.  Here's Bedford, for example:

It's actually an easy thing to accomplish without hard coding an image in there, but it's one of those Squarespace Developer nuances that flies under the radar.  The Banner Image in the above screenshot is being pulled from the Page Thumbnail Image section in Page Settings of that specific collection.  Here's the Markup:

{.section collection}
  {.section mainImage}
    <div class="image-container content-fill">
      <img {@|image-meta}>
    </div>
  {.end}
{.end}

And the CSS:

.image-container {
  width: 100%; /* Full width */
  height: 600px; /* Or whatever you want */
  position: absolute;
  z-index: 1; /* Set the z-index to be less than the content on top */
}

The key here is that you set a height and width on the image container and set it to position absolute.  Be sure to set the z-index of the elements that you want to superimpose to be higher than the image container.  This way, you'll have a full width, beautiful banner image with your site title and description resting on top.

You'll also notice the 'content-fill' class assigned to the same div as the image-container.  This class has a special meaning in Squarespace, and makes the <img> nested inside take up the entirety of the container.  Alternatively, you can use a content-fit class so as to not stretch it out fully.

More info here on content-fit and content-fill classes, in relation to ImageLoader

/ /