A background pattern can make your Squarespace site even more unique, and this tutorial will teach you how to create one with code!
– – –
Brand new to CSS for Squarespace? Check out my free training → https://insidethesquare.co/learn
– – –
Here are the steps from this tutorial:
Upload the image in your custom files; navigate to your design menu, select custom CSS, scroll down and click on manage custom files. CLick the arrow to drop your file here, or drag it over from your computer to that space to upload it.
Add the URL to the code; pick the right code from the options below.
Adjust the code; removethe text image-url-here and click on your custom file in the manage custom files folder to place the image url into the code, then replace the words horizontal vertical with one to two values.
Here is the code for a page section:
#page .page-section .section-background{
background-color: transparent!important;
background-image: url(image-url-here);
background-size: horizontal vertical;
}
Here is the code for an entire page:
#page {
background-color: transparent!important;
background-image: url(image-url-here);
background-size: horizontal vertical;
}
.page-section{
background-color: transparent!important
}
.section-background{
opacity: .9!important
}
Here is the code for a blog post. The second code for the inner wrapper is what creates the slightly transparent background behind the blog post content.
article {
background-color: transparent!important;
background-image: url(image-url-here);
background-size: horizontal vertical;
}
.blog-item-inner-wrapper {
background:rgba(255,255,255,.85);
padding: 1rem
}
Here is a link to the chrome extension I use in the video; not affiliated with them, just a fan! https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff
– – –
🔗 Related Links 🔗
Squarespace Fluid Engine: https://insidethesquare.co/fluid
How to install code on a single page in Squarespace: https://insidethesquare.co/singlepage
– – –
🤩 Download over 100+ pages of custom codes and pro tips for customizing Squarespace in one awesome PDF. Order the Squarespace CSS Cheat Sheet, available now at 👉 https://insidethesquare.co/css
– – –
💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸
Use my affiliate link and code PARTNER10 – You’ll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎
🔗 PARTNER10 → https://insidethesquare.co/partner10
– – –
🙋 Need some help? Visit https://insidethesquare.co/code-help to see my current support options.
– – –
🥰 SUPPORT MY CHANNEL → https://paypal.me/insidethesquare
💻 WEBSITE → https://insidethesquare.co
📧 NEWSLETTER → https://insidethesquare.co/email
🤳 INSTAGRAM → https://www.instagram.com/thinkinsidethesquare
👍 FACEBOOK → https://business.facebook.com/insidethesquare
📌 PINTEREST → https://www.pinterest.com/insidethesquare
—
