How to use an image for a background in Squarespace 7.1 // Full Page Background Image in Squarespace

This tutorial will teach you how to upload your own image to use as the background of a page on your Squarespace site, no matter how many page sections you have!

This is just the start of all the cool things you can do with custom CSS! Learn the basics in my free class: https://insidethesquare.co/learn

In this tutorial we are going to upload an image to your site, and then adjust the CSS code below so that image shows up behind all your content.

Important moments from this Squarespace tutorial:
01:03 How to upload the image to your site
01:36 What part of the code below to change
03:12 How to make sure the footer sections aren’t affected
03:44 How to change the background on a single page in Squarespace


Here is the code from this tutorial; be sure to replace url-here with the url for the image you uploaded to your Squarespace site!

/* Add the image as a background*/
#page{
background-image:url(url-here);
background-size: cover}

/* Make the page section backgrounds transparent */
#page .page-section {
background: transparent!important
}
#page .page-section .section-background {
background: transparent !important;
}


🔗 RELATED VIDEOS 🔗
How to install code on a single page in Squarespace: https://insidethesquare.co/singlepage

How to add a background image to the footer of your Squarespace site: https://youtu.be/QfXLxbRqVrs

How to add a background image to the header of your Squarespace site: https://youtu.be/Ibw7hkuVQAY

💸 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

🤩 Download over 60+ 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

🙋 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

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 ♥

You May Also Like