Text Block Overlaps Two Sections in Squarespace

Do you ever see a Squarespace Website or Template and think “Wow. How did they do that?” Well, I am one of those people that will tinker around until I figure it out.

I have seen a few templates and websites that have a coloured text block overlapping what looks to be two different sections. In addition, the two images appear to move different directions when the screen is scrolled.

 
How to Have a Coloured Text Block Overlap and Parallax Image.jpg
 

My first thought was that they added a background image with parallax scrolling. Then, they used some custom coding to add colour to the background of a text block and move the text block upwards or downwards out of its section.

After some tinkering around, I found solution and you may be happy to know that this involves no coding whatsoever! The following video shows you how to have a coloured text block overlap a parallax image.

 
 
 
Rebecca Grace

Rebecca Grace is a Squarespace CSS Expert and Website Designer.

https://rebeccagracedesigns.com
Previous
Previous

Add a Clickable Phone Number on Squarespace

Next
Next

Add A Facebook Messenger Chat Box To Your Squarespace Website