How to Create a Fixed Background Image Effect in Squarespace 7.1
The fixed background image effect, also known as a parallax background, is a modern and sophisticated web design technique that significantly enhances the usability of your Squarespace 7.1 site. In this article, you’ll learn exactly how to add it properly: clean, lightweight, mobile-aware, and 100% compatible with Squarespace’s configuration.
What Is a Fixed Background Effect?
A fixed background can remain in situ as the page is scrolled. It creates the illusion that the content is suspended over the imagery, a trendy effect commonly found in high-end portfolios, landing pages, and websites of creative agencies.
Why Use This Design?
Adds depth and visual sophistication
Improves user engagement without slowing down the site
Works natively inside Squarespace’s editor
No plugins, no third-party scripts
Simple to use with clean CSS
Step-by-Step Implementation (with Responsive Support)
Step 1: Identify the Target Section
Open your page in Edit or Preview Mode
Right-click on the section → choose Inspect
Locate the data-section-id in the HTML:
<section data-section-id="YOUR SECTION ID>"
Copy this unique ID for use in your CSS.
Step 2: Add the Custom CSS
Go to Pages → Custom code → Custom CSS and paste the following code block.
Developer’s Note:
The previous sections must be positioned relative to ensure the fixed background stacks properly. We also raise their z-index to maintain layering order.
/* Ensure previous sections are positioned correctly */
section[data-section-id="YOUR SECTION ID"],
section[data-section-id="YOUR SECTION ID"] {
position: relative;
z-index: 99;
}
/* Apply the fixed background effect */
section[data-section-id="YOUR SECTION ID"] .section-background {
position: fixed !important;
top: 0;
z-index: 0;
}
/* Ensure the footer stacks above the fixed background */
footer#footer-sections {
z-index: 999;
}
Reminder: Replace each data-section-id with your actual Squarespace section IDs as needed.
Step 3: Upload Your Background Image via Squarespace Editor
No code is needed to set the background image:
Click the (Settings) icon on the section
Navigate to the Background tab
Upload your desired background image
Save changes
Done! The image will now stay fixed as content scrolls above it.
Bonus: Design Enhancements & Accessibility
Add a Dark Overlay (Improves Text Readability)
section[data-section-id="YOUR SECTION ID"]::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.4); /* Adjust as needed */
z-index: 1;
}
section[data-section-id="YOUR SECTION ID"] * {
position: relative;
z-index: 2;
}
Add Mobile Support (Prevent Layout Bugs on Mobile Browsers)
Some mobile browsers disable background-attachment: fixed for performance reasons. Use this CSS to create a graceful fallback:
@media screen and (max-width: 767px) {
section[data-section-id="YOUR SECTION ID"] .section-background {
position: absolute !important;
background-attachment: scroll !important;
}
}
Final Thoughts
The fixed background image effect is a nice touch to take your site design on Squarespace 7.1 to the next level. A small block of very clean and very responsive CSS can achieve a layered presentation that looks product-grade and fun to see on your pages, with no loss in performance or mobile compatibility.
This feature is especially useful for hero sections, portfolio presentations and landing pages where visual narrative is important. It’s also a cinch to implement with built-in Squarespace tools—no plugins, no large, pesky scripts.
Whether you’re establishing a brand, introducing a product, or sharing a creative tale, a parallax section with a fixed background will help your content become more eye-catching while still keeping your site minimal and up to date.
Frequently Asked Questions (FAQ)
1. What is the difference between a steady background and parallax scrolling?
The image itself doesn’t move while the content slides over the top. Actual parallax is when elements scroll at different speeds (and it usually requires JavaScript). This tutorial gives you the PS Lite version that still provides the visual depth without slowing down your site.
2. Will this work with a Squarespace 7.1 template of my choice?
Yes. What matters is that if you point it at the appropriate section using its data-section-id, this will work for all 7.1 templates.
3. How can I discover which data-section-id to use?
Right-click on the section while in Preview or Edit mode → click “Inspect” → find the nearest <section> tag and copy the value of data-section-id. It looks like: data-section-id="xxxxxxxxxxxxxxxxxxxxxxxx".
4. Why doesn't the background-attachment: fixed work on mobile?
Most mobile browsers disable background-attachment: fixed for performance. The tutorial includes a fallback using position: absolute and background-attachment: scroll to prevent layout glitches on mobile devices.
5. Is this something I can use for multiple sections?
Yes. Just copy the structure and the CSS and "multiply" the repeated section, making sure to use different data-section-id values so that they can animate separately.
6. How does that impact my site speed or even SEO?
No. This is all done with CSS and leverages Squarespace's native handling of images, so there's no performance hit or risk of adversely affecting SEO.
7. How can I make the text more readable on top of the fixed image?
Utilize the optional dark overlay code from the guide as well. It overlays a semi-transparent layer between your background and your text to improve contrast, without the need to change the layout.
8. What's the optimal image size or format for a background image?
For desktop, use high-quality JPGs or a compressed WebP, circa 2000px wide. Make sure the file size is less than 500KB, so that the page load time is not too slow.