Custom Section Dividers in Squarespace

In this tutorial I show you how to create really cool custom section borders by creating an image and positioning it above the section using the before pseudo element. Using this method, you can create any custom image and give your index pages very unique borders.

It is a really easy way to take your Squarespace designs to that next level!

How to add the section divider to your Index sections in Squarespace

Custom CSS:

note: you will need to replace the background color and image link with your own.

#ingredients {
  background: #DE551B;
  overflow: visible;

  &:before {
    content: '';
    width: 100%;
    height: 100px;
    background-image: url(https://static1.squarespace.com/static/5c7afd4e4d87113ac42b95dd/t/5cb0c89be79c701c1c224218/1555089563553/mountain+range.png);
    background-size: contain;
    background-repeat: repeat-x;
    background-position: bottom;
    margin-top: -100px;
    position: absolute;

    @media screen and (max-width: 800px) {
      background-size: 200% 50%;
    }
  }
}

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.

Cheers!
Chris