Background image white gap at bottom

I have a background image but on my phone (iPhone xs) there is a white bar are the bottom?? It’s really annoying I have the settings to cover so I don’t know why its doing that?
Here is a link in case you want to take a look on your phone: https://www.dwgoalkeepingacademy.co.uk/old-home

read only link below.

Appreciate any help thanks!


Here is my site Read-Only: Webflow - DW Goalkeeping Academy

hi @Sam,

what about applying a background image to a section containing your column component instead of the body. Not sure what is wrong with your xs iPhone, everything display well on my end but I would as a golden rule try to leave the body as much as possible and apply changes to containers instead. Try to give your section 100% width and 100 vh (viewport height) and apply the background cover.

Hope that helps

Ah that worked! Thanks so much!

I thought it might’ve been because I had that spare column at the top, Im not sure how to get rid of that without getting rid of it on the homepage so I’ll leave it there, not sure if thats bad practise?

1 Like

Glad it helped !

I understand why you use column but I wouldn’t recomment using it for this type of layout. Have a look at flexbox, way easier to style and more versatile that the old column :wink:

Hope that give you some idea

I’m really sorry I seem to be having the same problem again? It worked for a while then I tried to add a footer and it broke it. I just wanted some space on mobile after the phone image. I really don’t know what I’ve done thats different and managed to break it?

Even weirder that now its showing that it will have white space on mobile now too?

This is literally driving me INSANE! I must be doing something really stupid otherwise loads of people would be having the same problem!

If you have a screenshot for us to have a look at, it could help :slight_smile: everything looks good from my side, can’t see any white space from the link you provided.

Ive managed to get this working on my homepage but the other pages won’t work in the same way. I’m getting so frustrated, anyone with any suggestions please put them forward!

Hi thanks for replying.

https://www.dwgoalkeepingacademy.co.uk/bs

This link is completely broken I don’t know what I’m doing wrong… maybe I’ve been looking at it for too long but its doing my head in!

Here is the read only for that page Webflow - DW Goalkeeping Academy

It’s probably just my brain being slow after doing it all day

any screenshot of the issue for us to have a look at ?

From what I see on your read-only link, you’ve placed the background image on the body again.
Also, be careful with the size of the image you upoad. Your background image is, I believe, way too big (3,5 Mo).

Here’s a screenshot from my phone

All right, you might want to try set a background image on something else than the body (your read-only link shows the background was set on the body again). Like suggested earlier, try to add a section or a simple div with 100% width and 100vh height which would act as a container for your entire content. Set then the background image on that section or div.

hope that helps!

Thats what I have but somehow its still not working? I don’t know how this is being so difficult? haha

I didn’t realise that I had it set on the body again, I was just trying everything as nothing seems to be working.

Hi @samwhu30,

Please submit an updated share link as well as a live link.

https://preview.webflow.com/preview/dwgoalkeepingacademy?utm_medium=preview_link&utm_source=designer&utm_content=dwgoalkeepingacademy&preview=a81402ff00604ff5ce5da24adc60cc8e&pageId=5d6e73c106a7ea2431194029&mode=preview

and

https://www.dwgoalkeepingacademy.co.uk/bs is the live site. Thanks!

Just replying to push this up a little bit to see if anyone else can help? Really struggling with this, would appreciate any kind of help.

Hi @samwhu30,

I am not seeing this issue.

Do you still see it on your end? And btw, you only need to have your height set to 100vh once, unless you are planning to have other sections at different heights.

But when I test it in Safari and Chrome on XS I do not have any white bar.

Hi,

Yes I still haven’t sorted it, The problem is only on mobile for me.

To be honest I don’t have a clue how I’ve managed to cock this up as much as I have… it won’t even scroll now…

Hi @samwhu30,

When I use your site live link in my testing program, I do not see what you are describing.

Could you please provide a screenshot or video of what you are seeing?

Also, try clearing your cookies as well. But keep in mind that 100vh is 100% of the Viewport Height. So if you have your section at 100VH everything that is within that section will be visible to the size of the viewport.