I’m currently revamping a client’s website through Squarespace. Even though website builders aren’t my prefered choice for development, they do allow clients easy access to update their site in the future.
For a particular section, I need there to be a separate background image for desktop and mobile. Surprisingly, there is not a built-in support for this on squarespace without custom CSS.
So here is how I accomplished this…
Access Custom CSS
In Squarespace dashboard, go to: Website → Pages → Website Tools → Custom CSS
. This is the setting that allows you to implement custom CSS into your squarespace site.
Capturing The Section ID
Next, you will need to locate the id of the particular section you want to edit
Go to your live site url and press F12 to open the browser console
Find the
<section>
element of the section you would like to editCopy the value of the
data-section-id
tag. Should look something like:63862367f9b5960c6ad5537e
Writing the CSS
Here is the CSS that should allow you to acheive the desired functionality:
@media (max-width: 640px) {
section[data-section-id="your_section_id"] .section-background img {
opacity: 0 !important;
}
section[data-section-id="your_section_id"] .section-background {
background-image: url('image_url');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
}
Values your_section_id
and image_url
come from the section id you found in the last step, and the image you wish to load as the background on mobile. I would suggest uploading your image to the Squarespace assets, and accessing the link from there.
Hopefully this works, feel free to reach out for any questions!
Thank you for reading