The size of the background image does not work on mobile


So everything is working fine on the browsers but when it comes to the mobile the background is zoomed in. I'm using the cover keyword in order to get the background image stretched out.

background-image: url({{ settings.site_bg_image | asset_url }});
background-position: {{ settings.bg_image_y_position }} {{ settings.bg_image_x_position }};
background-repeat: {{ settings.bg_image_repeat }};
background-attachment: {{ settings.bg_image_attachment }};
background-size: cover;

The settings for position in the backend is set to top center

tiling: tile vertically

Scrolling: stays fixed

Here is a link to check out what is going on

Any help is appreciated. Thanks in advance.

Try to change

background: url(bg.png);


background-image: url(bg.png);

Also add quotes to it to make it like this:

background-image: url("bg.png");