How to use a different background image on mobile in Squarespace

Mar 2

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

This tutorial will show you how to use custom CSS in Squarespace to change a section background image or an Index page background specifically on mobile devices.

Squarespace just released a brand new feature for page sections in version 7.1 called Section Divider.
I recorded a new tutorial, where you'll learn how to access these new design options and what your settings are.

A few important things to note before you copy and paste this into your own site:

There are two tutorials below; one for Brine and one for 7.1 sites. Make sure you are using the right tutorial for your version and theme! If you have no clue what that means, check out my beginners guide to CSS for more info on why it is SUPER important info to know before you start playing with code, and how to find out which one you are using. Grab a copy for free at insidethesquare.co/learn
Be sure to add this on a single page using page header code injection or a code block. If you aren’t sure how to do that, watch this tutorial to see the step by step process.

Version 7.1

The two codes you’ll need to work with are below:

Be sure to watch the step by step instructions in this tutorial video so you’ll know excatly how to install the code and what to change to make it work on your own site!

This code will remove the background image, leaving the solid color behind your text.

@media only screen and (max-width: 640px){
.section-background img { opacity:0!important }
}

Then you can use this code to replace the background image of a certain section with an image you upload to your site. Be sure to change the text “your image url here” with the URL for the image you upload to your custom files!

Also, don’t forget to change the 1 in nth-child(1) to represent the order number of the section you want to change.

@media only screen and (max-width: 640px){
#page .page-section:nth-child(1) .section-background img {opacity:0 }
#page .page-section:nth-child(1) .section-background {
background-image: url(your-image-url-here);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
}

Brine Theme

Use the code below to replace the background image of a certain section with an image you upload.

Be sure to change the text “your image url here” with the url for the image you upload! Also, don’t forget to change the 4 in nth-child(4) to represent the order number of the section you want to change.