How to place an image between index pages in Squarespace (Brine Theme Templates)

This tutorial is for the BRINE theme of Squarespace, built with an older version. For more information, visit https://insidethesquare.co/themes

In this tutorial I am going to show you how to use custom CSS to place an image between two index pages of your Brine Squarespace site.

Pro Tip: You’ll probably want to do this to just one image so you’ll need to know it’s block id.
Here is a link to the chrome extension I use to easily find block ID’s in Squarespace. *Please note I am not affiliated with them in any way, I just use this extension in my own work!

Here is the code from this tutorial:

This code will add a negative top margin to an image on your site so it will hover between two sections.

.sqs-block-image {margin-top:-50%}

If you are trying to target a specific image with a block id (which I STRONGLY recommend)  add that block id instead of .sqs-block-image like this:

#block-yui-123456789 {margin-top:-50%}

Make sure you also add this second line which will keep the image above both sections.

.Index-page{overflow:visible}

So your whole code will look like this, adjusting the block yui number to the one you want for your site, and the -50% to the right percentage for the look you are going for:

#block-yui-123456789 {margin-top:-50%} .Index-page{overflow:visible}