Background image is not set properly in ios devices

Recently I have been contributing to a website, However I am getting an issue in IOS mobile devices wrt to bg Images The images a kind of zoomed when i see it on IOS mobile device , and it is perfect for desktop, Android, And responsive console in Developer Tools (Inspect ). I need help to make it properly set the Images are give below

Devloper console image

(https://i.stack.imgur.com/3x8KJ.png)

The below Image Is on actual mobile device which is the issue i am facing with bg images.
IOS Mobile phone bg image which is the issue

This next image is desktop view:
Destop image
below is the code we are using for that image:

.bg-pronight {
    width: 100vw;
    height: 200vh;
    background-image: url('../assets/pronighthpimg.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}
.headingpronight{
    font-size: 8vw;
    margin: 0px;
}
#aboutus{
    padding: 0.5% 0%;
    /* margin-top: 3.5rem; */
}
@media only screen and (max-width:500px){
    .headingpronight{
        font-size: 14vw;
    }
    .bg-pronight{
        background-position: center;
        background-size: auto;
    }
}

I did tried some Stackover flow question and anser but didn’t worked out. I need help to fix that image zoom on IOS mobile device Thank you.