How to disable fallback image on desktop only?

Site URL: https://blueberry-bellflower-ls7b.squarespace.com/

PASSWORD - SoRight41!

I am working on a website with a video as background.

This BG Video does not work on mobile, so I have to use a fallback image.

The problem is that on page load, this image is visible for 1 or 2 second. Is possible to hide it completely on Desktop?

ALSO - just wanna check if there is any work around yet for having the video play on mobile?

Thank you 🙂

Add to Home > Design > Custom CSS

@media screen and (min-width:641px) {
.homepage .Parallax-item:first-child img {
    visibility: hidden;
}
}

I just added a new plugin for this to my webpage.

If the screen is wider than 640px, it will delay the fallback image from being visible for 4 seconds.

This way, if the video doesn't load for some reason, the image will show.

https://ultraoutlook.com/

THANK YOU BOTH!

I added this code to successfully hide the fallback background image on the homepage for desktop. However it's also hiding the background images on my portfolio pages. How can I only target the homepage?

Here's my site's URL: 

https://magenta-dachshund-daxm.squarespace.com/

Here's the code:

.section-background:first-child img {
    visibility: hidden;
}

@media (max-width: 740px) {
.section-background:first-child img {
    visibility: visible;
}

}

23 hours ago, HuskiiStudio said:

I added this code to successfully hide the fallback background image on the homepage for desktop. However it's also hiding the background images on my portfolio pages. How can I only target the homepage?

Here's my site's URL: 

https://magenta-dachshund-daxm.squarespace.com/

Here's the code:

.section-background:first-child img {
    visibility: hidden;
}

@media (max-width: 740px) {
.section-background:first-child img {
    visibility: visible;
}

}

Use this code

body.homepage .section-background:first-child img {
    visibility: hidden;
}
@media (max-width: 767px) {
body.homepage .section-background:first-child img {
    visibility: visible;
}
}

Hi, found this code and it works hiding the fallback image flashing. But it also hides another background image on the page.  Is there a way to make it apply to a spesific. block?

20 hours ago, North-Liw said:

Hi, found this code and it works hiding the fallback image flashing. But it also hides another background image on the page.  Is there a way to make it apply to a spesific. block?

Use this code

[data-section-id="id here"] .section-background:first-child img {
    visibility: hidden;
}
@media (max-width: 767px) {
[data-section-id="id here"] .section-background:first-child img {
    visibility: visible;
}
}

use this tool to find data section id https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en