How to create a vertical scroll image for Squarespace

Let’s talk about something that’s weirdly being gatekept: vertical scrolling images in Squarespace.

You’ve seen it—those sleek, tall mockups or long-format screenshots that scroll inside a fixed window. They’re everywhere in SaaS and template showcases… yet most tutorials hide the technique behind plugins or paid add-ons.

Good news: you don’t need any of that. Just clean, simple code.

What this does:

This method lets you insert a tall image (like a full-page web mockup) into your Squarespace site and allows it to scroll vertically inside a container, without overflowing your layout.

1. Insert a Code Block anywhere on your page.

2. Paste the code below, replacing the image URL with your own:

Code:

<div class="image">
<img src="https://yourimageurl.com/image.jpg" alt="image of website template">
</div>

<style>
.image{
height:522px;
width:1025px;
overflow:auto;
}
@media screen and (max-width:640px) {
.image{
height:250px;
width:350px;
overflow:auto;
}}
</style>

What this does?

• height and width: These define the visible window. Adjust to fit your layout.

• overflow: auto: This adds the vertical scrollbar only if needed - nice and tidy.

• Mobile-friendly? Yes - it’s responsive out of the box.

---

Sometimes the simplest tricks are the most powerful - and there’s no need to overcomplicate what should be a 2-minute job. Vertical scroll images in Squarespace are 100% doable with native code. No plugins. No fluff. Need more code tips for Squarespace?

Book a 1:1 strategy session or check out our library of code snippets and site enhancements.

---

---