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.