How to replace background images and videos
About this tutorial
This tutorial was recorded in Squarespace 7.1 using the Fluid Engine editor. Some settings will look different in the Classic Editor and on version 7.0.
In this tutorial I’m showing you how to add background images and videos on your Squarespace website.
Watch the video
Tutorial
Replace or add a background image
Navigate to the page you want to edit and click Edit Section at the top left of the page.
Scroll to the section with the background you wish to change.
Hover over it and click on "Edit Section" at the top right.
Inside the editing options, go to the "Background" tab — it will default to the “Image” tab.
Click on "Replace" (or the + sign if there’s no existing image) to upload a new image from your computer, select from your Squarespace library, or browse stock images.
To remove an image, click the red trash icon below the preview in the “Image” tab.
Replace or add a background video
In “Background” tab, click "Video".
Upload a video from your library or provide a link from YouTube or Vimeo.
To remove a video, click the red trash icon below the preview in the “Video” tab.
Adjusting text colors
If you’ve added a photo or video background and the text no longer has enough contrast, you can change the section theme to adjust the colours to suit instead of changing colours of individual text blocks or elements.
In Edit Section, switch to the "Colors" tab and choose a theme for your section.
Themes automatically update text colors and elements to match the chosen theme. Click between a few to see what looks best with your image or video.
Customizing color overlay
As you switch between themes, you’ll notice each has a subtle colour overlay on the video or image that can be adjusted.
In the "Background" tab, scroll down to adjust the color overlay's strength.
Find the balance that complements your design, ranging from 0% (no overlay) to 90% (strong overlay).
Individual colours for each theme’s overlay can be set in Site Styles.
Background width options
Whether you have a background image or a video, you can change the width of the background between two options.
In the “Background” tab, scroll down and toggle between the "Full Bleed" and "Inset" options to control the background width.
"Full Bleed" covers the entire section, while "Inset" creates a bordered look.
Enhancing with image effects
Back in the "Image" tab, you can explore "Image Effects."
Hover over effects to preview and click to apply them to your site.
To remove, click “None.”
Your designer
Hey, I'm Cass, founder of Willful Studio. I’m a Squarespace website designer for go-getting women, no matter what stage of business you’re at. If you want to discuss a potential project, you can email at cass@willful.studio or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.
