How to add a Background Image to A Squarespace Gallery Section
In this tutorial, you'll learn how to add a custom background image to your gallery sections using a little bit of code.
We're going to upload your image, grabbing the necessary data section ID, and update the CSS code below to change the background of your gallery section to a full with image. You'll learn how to control the size, position, and attachment of your background image for a truly customized look.
Brand new to custom code? Start with my free training: https://insidethesquare.co/learn
Important Chapters
00:00 Introduction to Adding Background Images in Squarespace
00:41 Navigating to Custom CSS in Squarespace
00:49 Uploading Your Background Image
01:11 Identifying the Section ID
01:43 Writing the CSS Code
03:01 Customizing Background Properties
04:04 Finalizing and Saving Your Changes
04:58 Conclusion and Additional Resources
Here is the main code from the video:
[data-section-id] .section-background{
background-image: url (url-goes-here);
background-size: cover;
background-position: center;
background-attachment: fixed
}
Related Resources:
📝 Original blog post → https://insidethesquare.co/squarespac...
#️⃣ Block ID extension → https://insidethesquare.co/chromeext
🎓 Free Code Training → https://insidethesquare.co/learn
📚 Squarespace CSS Code Collection → https://insidethesquare.co/css
📄 Tutorial: Add code to a single page → https://insidethesquare.co/squarespac...
🍿 Free Squarespace tutorials → https://insidethesquare.co/tutorials
🙋♀️ Have a question? Check out my code troubleshooting tips → https://insidethesquare.co/code-help
- -
The term Squarespace is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace Inc. The accuracy of this information is subject to change. #squarespacetips #squarespacetutorial #squarespace #learnsquarespace #learncoding #squarespacetricks #squarespacetraining #squarespacecode
