I am facing a significant issue that I have not been able to find a solution for yet, so I'm hoping you might be able to help.
My work involves creating websites, and I am in need of making the cover background image responsive (covering the entire page). I initially used the following code:
/* Location of the image */
background-image: url(main.jpg);
/* Background image is centered vertically and horizontally at all times */
background-position: center center;
/* Background image doesn't tile */
background-repeat: no-repeat;
/* Background image is fixed in the viewport so that it doesn't move when
the content's height is greater than the image's height */
background-attachment: fixed;
/* This is what makes the background image rescale based
on the container's size */
background-size: cover;
/* Set a background color that will be displayed
while the background image is loading */
background-color: #464646;
This code works well, even when I resize the window. However, I encountered an issue on high-resolution screens like iPad or iPhone. On these devices, the image appears very zoomed-in, pixelated, or unfocused. Initially, I thought this was due to low image resolution, but upon realizing that the image is nearly 5K, I understood that wasn't the case. I aim to achieve responsiveness similar to that seen on this site.
I would greatly appreciate any assistance as I need to resolve this promptly!
Thank you.