Video background or a fallback image not loading on mobile devices but no fallback image option?

I am having trouble with Sydney theme background not responsive to mobile devices

I tried several widgets - site origin, video background plugin, Elementor… none of then worked on mobile devices.

I am aware that many Wordpress themes are still like this. But these have a fallback image option.
I read the previous thread about CSS, but I could see CSS didn’t solve the problem.

But In this case, how to add Mobile fall back image to avoid showing a blank screen?
I added a static image on the Row along with the video background but did not work. ( I used Squarespace instead WordPress before and worked)

I read the following discussion, but these are nearly a year old, and none of them stated issues above, so I wondered if there are any other solutions I can look into…

http://forums.athemes.com
Background image not responsive

https://athemes.com/forums/topic/background-images-not-scaling-down-on-mobile-view-iphone/

https://athemes.com/forums/topic/background-images-not-scaling-down-on-mobile-view-iphone/2
https://athemes.com/forums/topic/background-images-problem-on-iphone/11

I look forward to hearing from your view on this.

Thanks,
Tom

Hello Tom,

Please provide a link to your website and describe what exactly you want to achieve.

Kind Regards, Roman.

Hello Roman,
THis is the website Affected:
http://77.104.149.108/~tomkata6/
Please check this on the mobile devises so that you can see what I mean.
Let me know if you have any further questions.
Hope this make sense.

Thanks

Tom

Regarding your another question; What I want to achieve…

As I described in the first post,
I do not want to show a blank screen on the mobile device.
The mobile device doesn’t show the video background.
But I believe I can replace the image (call Mobile fall back image) especially for mobile devices.

I want to have a video Background, but if the video background turns out blank on the mobile devices,
I need help to figure out how to add a mobile fallback image.

I hope I am making my question clear.
If you have any further questions, please let me know, but if you see the website on the mobile device, I believe you will see what I mean…
Thanks

Regards,
Tom

Hello Tom,

You can try to use something like the following CSS code.

You can add CSS code in Dashboard → Appearance → Customize → Additional CSS.

.panel-row-style-for-239-0 {
    background-image: url(http://77.104.149.108/~tomkata6/wp-content/uploads/2017/12/bg-lionello-delpiccolo.jpg) !important;
}

Kind Regards, Roman.

Hi Roman,

I tried the code, yes, it worked perfect.
Thank you so much for your help!

Have a great day!

Tom

Great, you are welcome Tom!

And have a great day as well :slight_smile:

Kind Regards, Roman.