How to Add a Repeating Background Pattern in Squarespace | Custom CSS Tutorial

Background images slowing down your Squarespace site? There's a better way. In this tutorial, I'll show you how to add a seamless repeating pattern as your section background using custom CSS; it's lightweight, fully customizable, and you can use a different pattern size per section. This method works in Squarespace 7.1 and uses a transparent PNG so your section background color shows through the pattern, giving you tons of flexibility without touching your design editor. In this tutorial you'll learn: ✔ How to upload a seamless pattern PNG to Squarespace custom files ✔ The CSS code for background-image and background-size ✔ How to adjust pattern scale with a single percentage value ✔ How to apply a unique size to one specific section using its section ID ✔ How to exclude the pattern from your footer 🔗 Get the code from this video: https://tutorials.squarespace.com/code/background-pattern 🧩 Free Chrome Extension: Squarespace ID Finder by Will Myers https://chromewebstore.google.com/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?pli=1 —————————————————————— CHAPTERS 0:00 Why seamless patterns beat background images 0:21 Getting started in the Squarespace CSS panel 0:41 Making your section background transparent 1:00 Adding the background-image with your custom PNG 1:16 Controlling pattern size with background-size 1:55 Applying the pattern across all page sections 2:00 Targeting a specific section (Squarespace ID Finder) 2:13 Setting a different pattern size per section 2:55 Removing the pattern from your footer 3:36 Final tips + save your changes —————————————————————— 🎓 New to CSS in Squarespace? Check out my free class on the basics: https://insidethesquare.co/learn #Squarespace #SquarespaceCSS #WebDesign #SquarespaceCustomization #SquarespaceTutorial - - - The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥