Body image shrinks in mobile view; not seen in preview

Hello,

I am rather new on Webflow and have managed to create first sign up website. Super simple website.
I am having trouble with the body image. On the browser and design+preview mode everything is fine but when I open the actual page on my phone the background image is cut off and there is a line. Does anyone know how to fix this? Many thanks and Iā€™m forever grateful! :blush:

Some photos to help explain this better:

How the site looks on an actual iPhone screen. You see the image is cut off and the background colour just continues.

:

However when I view in Webflow designer preview it looks all good aaaaand completely different:

These are my current settings for the body background image:

Basically the in preview all is good but on the phone things change is not how I want them.

These are my layers:

Screenshot 2022-09-21 at 14.33.25


Here is my site Read-Only: [(https://carbon-monster-game.webflow.io)]