Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Search the Community

Showing results for tags 'fallback-image'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Selling & Scheduling Your Services
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
    • Resources
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers 🇫🇷's Topics
  • France Designers 🇫🇷's Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion
  • German Circle Members's Topics

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

Found 16 results

  1. Site URL: https://eugenia-grace.squarespace.com/ The password to the site is: egrace I am wondering if it is possible to remove the very quick flash of the fallback image as soon as you load in the website. It seems that the fallback image is shown for a split-second as the video background loads in. Can I replace this flashing image with a simple solid white background instead of the fallback image? Currently, I am using the fallback image for the mobile version of the site, so I cannot delete it. I am using the following custom CSS to make the fallback image on this background display when the site width is set to 767px or less: ----------- /* Mobile show fallback image */ @media screen and (max-width:767px) { [data-section-id="618bdd50e7453731cdf1aa61"] .sqs-video-background-native__video-player.video-player { display: none !important; } [data-section-id="618bdd50e7453731cdf1aa61"] img { opacity: 1 !important; } } ---------------- I noticed that when I remove the fallback image altogether, the site displays the site background color (white) while the video background takes a fraction of a second to load in. I would like this to happen, but I do not wish to remove the fallback image, since I am using it for the mobile version of the site. Thanks in advance, Matt
  2. Site URL: https://www.gnarcolepski.com/ I have tried other examples provided for the custom css and had no success I would like to keep the video on desktop browsers but completely replace that video background with the fallback image for mobile use of the website.
  3. Site URL: https://lloydbirchdrone.co.uk/ Hi all, I have a video on my home page for desktop viewing, this works perfectly. What I'm looking to do is disable it for mobile and use the fall back image? the quality of the video on mobile is pretty poor compared to desktop viewing. Is this possible? Any help would be greatly appreciated. Lloyd
  4. 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 🙂
  5. Site URL: https://cleaned.net.au Hey there, Can you please help me out in resolving the issue of the mobile fallback not working on the website. Thanks
  6. Site URL: https://kargo.com/test-mb Hello, I've noticed that the mobile fallback image I've dropped into the banner area of this page shows on desktop before the video plays. Is there a way to disable this? Also, what is optimal size / aspect ratio for the mobile fallback image? I'm noticing that the currrent image is far too wide on mobile. See header are of https://kargo.com/test-mb
  7. Site URL: https://www.sunrisesunsetproductions.com/ The mobile fallback image for my homepage's video banner keeps getting cropped into vertical like so: Would like to scale it down to its horizontal original shape, like here: is there any custom code that can do this?
  8. Site URL: https://www.cityzerofilms.com/ Hi folks, Minor issue here. I recently added our demo reel to autoplay in the Home page banner which will only work on desktop (would love it to work on mobile but...). I then chose a fallback image for mobile. The fallback image on mobile always takes a few seconds to load and I'm wondering if there's anything I can do to speed that up. Things I've already tried: Resized the image to 1365x768 Encoded the image export to JPG rather than PNG. Any help is much appreciated. Thanks!
  9. Site URL: https://www.megangracephotography.co.nz/ On desktop I have a video, on mobile I'd like the fallback image to link to the same video at the very least, adding a button to show it's linked would be even better. Can it be done directly under advanced settings to that index-block?
  10. Site URL: https://warnervisuals.com/?password=warnervisuals Hi there! Does anyone know a way to disable the mobile fallback image and to replace it with a short video of a file size that's under 1mb?
  11. Site URL: https://oval-denim-r8bs.squarespace.com We added some Parallax functionality and unfortunately it broke the fallback image that comes up for mobile users. Anyone know any way to alter this code to not impact the video header? <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script> <script> $('.has-background:not(:has(.sqs-video-background))').each(function() { var findImage = $(this).find('.section-background img'); var imgUrl = findImage.data('src') + '?format=2500w'; var dimensions = findImage.data('image-dimensions'); var imgWidth = dimensions.substr(0, dimensions.indexOf('x')); var imgHeight = dimensions.substr(dimensions.indexOf('x') + 1); $(this).parallax({ bleed: 0, imageSrc: imgUrl, naturalWidth: imgWidth, naturalHeight: imgHeight, speed: .5, }) }); document.getElementsByTagName("body")[0].onresize = function() { setTimeout(function() { jQuery(window).trigger('resize').trigger('scroll') }, 100) }; </script> <style>.has-background{background-color:transparent!important}.has-background .section-background{background-color:transparent!important}.has-background .section-background img{visibility:hidden!important}.has-background.background-width--inset{margin:4vw;padding:0!important}.has-background.background-width--inset:not(.content-collection):not(.gallery-section) .section-background{top:0!important;right:0!important;bottom:0!important;left:0!important}</style>
  12. Site URL: https://www.iamjustinsinger.com/ Is there a way to disable the background fallback image on mobile? I want to keep it on the desktop version.
  13. Site URL: http://sociallydigitalmarketing.com Hi everyone! I'm having a slight issue with my website in regards to the mobile fall-back image flashing quickly before the start of the background video. In order to fix this issue, I did some research and stumbled upon this code: <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256- 9/aliU8dgd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <script> var imgSRC = $('.custom-fallback-image').attr('src'); $('.custom-fallback-image').attr('src', 'https://commons.wikimedia.org/wiki/Category:solid_white_images#/media/File:Borad_blank_space.jpg'); $(document).ready(function () { $('.custom-fallback-image').attr('style', 'display: none'); setTimeout(function () { $('.custom-fallback-image').attr('style', 'display: block'); }, 4000); }); </script> Although it fixed the flashing issue, it then created a problem in which the fall-back image does not ever appear centered on mobile devices. I know this code is the cause of it because when I remove it the problem is fixed, however I'm not sure what alternatives there are or how to fix it. Obviously removing the code altogether would solve the alignment issue but then the flashing problem would reoccur. Does anybody have any advice? Thank you guys so much in advance!
  14. Hi, I'm pretty new to Squarespace so this has had me stumped for the past couple of hours and I can't find any similar solutions on the Internet that I could successfully adapt. I've just launched my new website (www.csvideo.co.uk) and I am using a video from Vimeo as the video background. When I load my site it takes a second or so to start the video and so shows a black background. Not a problem until you get to mobile where the lack of anything and a solid section of black looks weird. I thought I'd solved this by uploading a mobile fall back image that suits my website when viewed on a mobile device but then this image is shown while the video loads on the desktop and looks completely out of place! Aaarrgh! Temporarily I've uploaded the first frame of the video so it looks okay on desktop but the image doesnt really suit the static view on mobile so I was wondering is there a way I could tell SS to only select a certain image when its viewed on desktop or mobile? That way I could use a suitable image on both version. Thanks!
  15. Site URL: https://www.orcasoundproject.com/ Hello, I have been trying all the coding I could find around but none seems to be working for me. The fall back image keeps appearing at the beginning of the video on desktop version and I would like for the video to play on its own. This is the website: www.orcasoundproject.com Thanks
  16. Site URL: http://workbypage.com Hey all, I'm a designer by trade slowly familiarising myself with coding. Although I've seen this issue posted plenty, I haven't found a solution that fits my specific site layout. What I want to do is simple. I currently have a desktop arrangement at the top of my site which arranges 2 rows of images as: <IMAGE> <SPACER> <TEXT> <TEXT> <SPACER> <IMAGE> As I scale to mobile, the images and text don't arrange as alternating. It stacks as: <IMAGE> <TEXT> <TEXT> <IMAGE> This is less than ideal and butts two text fields next to each other. As it scales to mobile I'd like it to go: <IMAGE> <TEXT> <IMAGE> <TEXT> If anyone can help guide me to force the site to do that, it'd be hugely appreciated. I'm referencing the second section of the homepage, titled 'Work by page'. Site: workbypage.com Pass: Car19Elephant19 All the best, and thanks in advance! Also, thanks for all the help you've been giving here so far, I've used much of the responses I've found to similiar issues I had as others. Asa
  • Create New...