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;
}
}