How to add an image as a background on mobile only

Site URL: https://www.ruralstudios.co.uk

I have a background video playing on my homepage that looks great on desktop but doesn't work for mobile. I want to have an image instead and have tried the below code (inputting my collection ID and image url) with no joy! Any help much appreciated. Please contact me directly for the site password

@media only screen and (max-width: 640px) {
#COLLECTIONID{
#page .page-section:nth-of-type(1) {
.sqs-video-background {
display: none;
}

.section-background {
background: url("IMAGEURL");
background-repeat: no-repeat;
background-size: auto 100%;
}
}
}
}

Elle! I am having this exact issue right now 😭  I have tried so many different options of other code work arounds from these forums but have yet to find one that works. The only thing that sort of works is setting a mobile fall back image. 

You have to insert your specific data-section id in the code below and also set insert your image on the page with your video by going to the pencil icon > background > scroll down to add your mobile fallback image. It isn't a great fix because the fall back image flashes on the desktop version for a split second before the video starts and imo feels wrong. Woof! I beg of you to lmk if you find a better fix. 

/* Mobile show fallback image */

@media screen and (max-width:767px) {

[data-section-id="613fb79e80cd721603deea22"] .sqs-video-background-native__video-player.video-player {

    display: none !important;

}

[data-section-id="613fb79e80cd721603deea22"] img {

    opacity: 1 !important;

}

}

okay! I found some code from another post that stops the mobile fallback image from flashing at first on the desktop and added to the code a previously posted. Soooooo, to have an image on mobile and something else on desktop, I added a photo to the mobile fall back section and then used this code in Design > CSS...seems like a crazy work around and should just be a standard option in squarespace 🙈

/* Mobile show fallback image */

@media screen and (max-width:767px) {

[data-section-id="613fb79e80cd721603deea22"] .sqs-video-background-native__video-player.video-player {

    display: none !important;

}

[data-section-id="613fb79e80cd721603deea22"] img {

    opacity: 1 !important;

}

}

body.homepage .section-background:first-child img {

    visibility: hidden;

}

@media (max-width: 767px) {

body.homepage .section-background:first-child img {

    visibility: visible;

}

}

Hi Aby!

Thanks so much for responding! This is a major issue with alot of templates I think! It's a shame also because the only way around it is to use custom css which Squarespace don't offer support with and can break the functionality of your site (which is why I generally avoid it!)

I couldn't get this code to work for me 😞  Probably because I haven't added my own info to it properly. Can you clarify what this code has done for you? Have you got it to show an image instead of video full time on mobile?? Would be great to chat directly - drop me a line on eleanora@ruralmedia.co.uk if you have time and we can try and resolve it!

Thanks again,

Elle

Hi.

What is access password? We can help easier