How to add a full background image to Squarespace - including the header & footer!
Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content
About This Tutorial
This tutorial was recorded using Squarespace 7.1 and these codes will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes
Background images are a powerful design tool, adding personality, depth, and visual interest to your Squarespace website. In this tutorial, you'll learn two ways to add captivating background images to your Squarespace pages.
First we’ll add a page section background to Squarespace. It’s a built in feature that places an image behind specific content areas. (It's easier than you think!) You’ll also learn an often overlooked step - how to set the focal point for your background image! The focal point is essential for mobile design.
For an even more impactful look, we’ll also delve into the world of custom CSS code and discover how to create a background image that spans your entire website, including the header and footer.
The codes used in this tutorial are listed below, but make sure you watch the step by step instructions so you know how to use them!
Squarespace Tutorial
Code Example
Here are the codes from this tutorial. Be sure to update the placeholder text and choose the right background option for your design; contain or cover.
site-wrapper {
background-image:url(url-here);
background-size: contain
}
.page-section .section-border, .page-section .section-background{
background:transparent!important;
background-color:transparent!important
}