I am currently experiencing an issue with my background images not rendering properly on mobile devices, specifically safari and chrome on iPhone XR. Although they appear to work perfectly on Code Pen - resizing properly as the viewport shrinks and switching to a mobile-friendly background image at the specified break point - this is not translating in reality on the phone. It seems like the backgrounds are being overly zoomed in on the device.
Project: https://codepen.io/learntocodequickly/pen/yLaWPKg
.first {
background-image: url(https://learntocodequickly.com/wp-content/uploads/2021/01/mlk-12-1.jpg);
background-position: top center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #333333;
}
@media screen and (max-width: 600px) {
.first {
background-image: url(https://learntocodequickly.com/wp-content/uploads/2021/01/mlk-12-2.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
width: 100%;
background-color: #333333;
}
}
I have tried adding the media info into the head section and also experimented with switching from the 'cover' attribute to using a 100% width, but unfortunately, I have had no success in resolving the issue. I am unsure where the problem lies and would greatly appreciate any assistance!