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 in 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
-
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.
-
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.
-
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".
-
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.
-
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.
