How can I zoom out the background image on mobile view?

[julianojg]

How would i make the background image be zoomed out as it is too zoomed in while on mobile.

This is what it currently looks like:

This is what i am trying to make it look like:

 

This is the code:

{% if template.name == "index"%}

    {% style %}

    body.gradient {
            -webkit-backdrop-filter:  brightness(65%);
            backdrop-filter:  brightness(65%);
            background: url(https://cdn.shopify.com/s/files/1/0795/7001/0410/files/971B9334-9B9E-4FDE-9DF4-900B3ADE9F26.jpg?v=1689684021) !important;
            background-position: center center;
            background-repeat: no-repeat !important;
            background-size: cover !important;
            background-attachment: fixed !important;
        }
       
        .gradient {
            background: rgb(#000000)
        }
       .footer.gradient,
     header-wrapper  {
            background: rgb(#000000)
        }

    {% endstyle %}

{% endif %}  

[dmwwebartisan]

@julianojg 

Please share your store URL and frontend store password because your shop is password protected

Thanks!

[julianojg]

here is a preview link so password is not needed:

https://n9cvsykonkg7kovb-79570010410.shopifypreview.com

[julianojg · Accepted solution]

{% style %}
      
/* Set initial styles for the entire page */
html, body {
  background:black;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: auto; /* Prevent scrolling on mobile */
}

/* Apply styles when the device is in vertical orientation */
@media (max-width: 768px) and (orientation: portrait) {
  body {
    overflow: auto; /* Enable scrolling in vertical orientation */
  }
}

/* Apply styles when the device is in horizontal orientation */
@media (max-width: 768px) and (orientation: landscape) {
  body {
    overflow: auto; /* Enable scrolling in horizontal orientation */
  }
}