How to place an image between sections in Squarespace version 7.1

Apr 6

This tutorial is specifically for the latest version of Squarespace, known as 7.1, and won't work for older versions of Squarespace. 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 sections of your 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!

Download Transcript

Here is the basic 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%}

Want to adjust this code for the mobile version of your site?

Add this media query in a new line to make sure it only applies to screens smaller than 640px in width. Don’t forget to change that example text to the right block id!