Image Adjustment for High Density Display Cap

Question

I have one serious problem. I have not found a solution yet, so I hope you know.

I make sites. I need to make a responsive background image for the cover (which covers the entire page). I started with:

/* 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 height is greater than the image height */ background-attachment: fixed; /* This is what makes the background image rescale based on the container size */ background-size: cover; /* Set a background color that will be displayed while the background image is loading */ background-color: #464646; 

This code just works, even if I resize the window and so on .. So this is very good. But problém appears on screens with a resolution in height, such as an iPad or iPhone. There, the image is very scaled, and the pixel is unfocused. I thought this was due to the low resolution of the image, but I realized that the image is almost 5K. I want to make it responsive, like to this site

Any help would be good, you need to solve it quickly!

thanks

Answer 1

You can create a media query in CSS to manually adjust the background image on mesh displays (or other high-resolution screens).

See CSS-tricks .

Retina Mediaquery Performance:

 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { ... } 

And more lance proof:

 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { ... } 

---

Questions:

• What are media queries?
• What is DPI?
• What is the pixel ratio of a device?

---

Also see this post for the same question / answer.

Answer 2

This is because you are using background-attachment: fixed - for some reason this is when used with background size: the iOS cover causes this behavior. Therefore, if you add the following, it should be allowed:

 /* for background-size:cover replacement on iOS devices */ @media only screen and (orientation: portrait) and (device-width: 320px), (device-width: 768px) { header { -webkit-background-size: auto 150%; background-attachment: scroll; } } @media only screen and (orientation: landscape) and (device-width: 320px), (device-width: 768px) { header { -webkit-background-size: 150% auto; background-attachment: scroll; } } 

The solution here is on SO .