Background image cropping

[romilyalice (Romily)]

Hi,
I’m struggling with a background gif issue. I have my gif up on my contact page. I was it to cover the whole page and stay fixed. It’s working fine on desktop but on my iphone (landscape and portrait) the gif doesn’t cover the whole page. I have tried setting the height to 100% and 100VH but neither of them are fixing it.
The funny thing is that on the webflow designer it looks like its working properly but IRL its cropped. Would love some help if anyone has any smart ideas!
Thanks
Romily

How webflow shows it:

How my phone shows it:

---

Here is my public share link: https://preview.webflow.com/preview/romilyalice?preview=b054dcd2004c9567d7300c86a93f6259

[samliew (samliew.com)]

That is normal behavior with background images when you use background “cover”. The trick is to choose an image that displays well on all devices.

[romilyalice (Romily)]

Thanks Samliew I didn’t know that. So the cropping issue doesn’t happen with my home page just because the image is a better size?
Do you know if theres any way to work around this apart from setting the image to tile?
Thanks very much for your help

[samliew (samliew.com)]

You can set to ‘contain’ to avoid cropping.

[romilyalice (Romily)]

Ah thanks Samliew. So the image on my homepage will just be a better size
image?
Are there any workarounds to this? Apart from tiling the image I can’t
think of anything

Thanks again!

[samliew (samliew.com)]

Are there any workarounds to this?

The trick is to choose an image that displays well on all devices.

[Diarmuid_Sexton]

you could use a screenshot still of the gif - that might work - so instead of a gif it’s a still image?

or you could use a screenshot still of the gif - maybe blur it slightly - set it to cover the full or set it to the bottom on the background position option - that would fill the space and maybe look quite flush and clean…