Change the Mobile Background Image in Squarespace 7.1
** Updated November 27, 2023 **
To help your website be more mobile friendly, Squarespace automatically resizes your background or banner images when being viewed from a mobile device. However, depending on the content of your image, you may not like how the image is cropped.
In a previous video, I have shown you how to change the image to a different image when being viewed from a mobile device on Squarespace 7.0.
In this video, I show you how to apply this to Squarespace 7.1. All the code used in the video is provided below.
Step 1: Prepare Your Image
The first thing you need to do is prepare the image you want to be shown on mobile. There is no set size for this image as it will depend on the size of your section. However, make sure to name the image using keywords and ensure the file size is smaller than 500kB for SEO purposes.
If your section has a lot of content, I suggest create an image that uses color gradients or patterns so that they can be stretched to fill the section.
Step 2: Upload the Image
The next step is to upload your image to your Asset Library and obtain the image url. To do this, click on Asset Library and upload the image. Then, right click on the image and select to open it in a new tab.
If your mobile image is blurry, check the image url you used for the words “format=300w”. If it has this, delete it out. When Squarespace saves an image, it saves it as multiple sizes. It could be that you are using the link from a smaller version of your photo.
Step 3: Add the CSS
Finally, you need to add the CSS magic that will hide your desktop image and display your mobile image instead. Copy and paste the following code in the Custom CSS. Then edit the collection id, section number, and image url.
Note: If you have a background effect applied to your desktop background image, then you will need to use the second bit of code below.
/* Rebecca Grace Designs Mobile Banner Image */
@media only screen and (max-width: 640px) {
#COLLECTIONID {
#page .page-section:nth-of-type(1) {
.section-background img {
display: none !important;
}
.section-background {
background: url("IMAGE URL");
background-repeat: no-repeat;
background-size: 100%;
}
}
}
}If your background image uses an effect, use this CSS instead.
/* Rebecca Grace Designs Mobile Banner Image */
@media only screen and (max-width: 640px) {
#COLLECTIONID {
#page .page-section:nth-of-type(1) {
.section-background img, .section-background-canvas {
display: none !important;
}
.section-background {
background: url("IMAGE URL");
background-repeat: no-repeat;
background-size: 100%;
}
}
}
}