Using seperate background images for mobile and desktop (Squarespace)

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

1. Go to your live site url and press F12 to open the browser console

2. Find the <section> element of the section you would like to edit

3. Copy 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