▼
Streaming live at 10am (PST)

Background image cropping

#1

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:

Screen Shot 2016-08-13 at 11.31.16.png1116x1498 708 KB

How my phone shows it:

IMG_5698.jpg750x1334 168 KB

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

#2

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.

#3

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

#4

You can set to 'contain' to avoid cropping.

#5

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!

#6

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

#7

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...

closed #8

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.