Content in Box Over Banner Images in Squarespace

In this Squarespace tutorial, I show you how to achieve the boxed content over a banner image design in Squarespace. This is a really beautiful design layout and is really easy to achieve with this custom CSS.

Put Content in a Box over Banner Images in Squarespace

Custom CSS:

#home-intro {
  .Index-page-content {
    background: #D9A281;
    width: 40%;
    padding: 5%;
    margin: 10%!important;
    color: #fff;

  @media screen and (max-width: 640px) {
    .Index-page-content {
      width: 100%;

If you have any questions or need help implementing this on your site, please feel free to shoot me an email or leave me a comment on YouTube.