Squarespace 7.1 sections with background images can be given a parallax effect using background-attachment: fixed. This creates the illusion of depth as the user scrolls through the page.
Note that background-attachment: fixed doesn't work on most mobile browsers, so include a fallback that disables it on smaller screens to avoid a broken experience.
[data-section-id="YOUR_SECTION_ID"] .section-background img {
display: none;
}
[data-section-id="YOUR_SECTION_ID"] .section-background {
background-image: url('YOUR_IMAGE_URL');
background-attachment: fixed;
background-position: center;
background-size: cover;
}
@media screen and (max-width: 767px) {
[data-section-id="YOUR_SECTION_ID"] .section-background {
background-attachment: scroll;
}
}Generate this with our Section BuilderTry it free →
